How to add inline css code with background image in page html code?

Question

I want to add inline css code inside a page of my blog. This css code calls an image as background of a div.

Is this possible? and how to do that?

I have tried to add the image as a Media resource, and got a URL for it, but using this URL does not seem to work.

Example of code that I paste to my page html:

    <p><a href="http://mysite.com/wp-signup.php" style="width: 90%;
        font-family: Helvetica, Arial, sans-serif;
        background: #0e710d url(http://mysite.com/wp-content/uploads/2012/03/image.png) 0 0 repeat-x;
       font-size: 1.6em;
    ">
    Click here &raquo;</a></p>

Answer 1

cant you just give that link a class? why touch your template files?..
anyhow i see no reason why you can't to that... the css should work..

The only change i would do when editing a template file is
using php to get the folder url (where you image is) like so:

<style type="text/css">
.specialLink a {
    width: 90%;
    font-family: Helvetica, Arial, sans-serif;
    background: #0e710d url("<?php get_bloginfo('url'); ?>/wp-content/uploads/2012/03/image.png") repeat-x 0 0;
    font-size: 1.6em;
}
</style>

<p class="specialLink"><a href="http://mysite.com/wp-signup.php">Click here &raquo;</a></p>

Again... i reccomend you use your style.css to load that css and not in
template files.. if you need it just for a specific page say so... i have
a better solution for that.

Hope this helps, Sagive.

Answer 2

There's no reason this technique shouldn't work in general, although your specific code example won't work the way you say you want: you're adding the style attribute to an A tag, not to a DIV tag, which is what you say you want to do. So the A tag should be styled as shown, not the DIV tag.