Thread

How do I get background images to show. I’ve used this

{site_url}images/photo.gif

background-image: url(images/photo.gif) no-repeat top left;

background-image: "{site_url}(images/photo.gif)" no-repeat right bottom

I guess I’m doing something wrong but don’t know what. Please help

I’ll assume you are doing this within a cascading style sheet with something like this:

body {background-image: url(images/photo.gif) no-repeat top left;}

Make sure your path to the image is correct.  The path you have places the images folder immediately off the root so it would be located at:

<a href="http://www.yoursite.com/images/photo.gif">http://www.yoursite.com/images/photo.gif</a>

And if you were to type the above directly into your address bar on your browser, do you get the image?

Or you can try it like this:

{background: url(images/photo.gif) no-repeat top left;}

I guess I’m doing something wrong but don’t know what. Please help

Couple of things that are wrong:

If you use the background-image rule, you are limited to specifying the url ONLY, no positioning or repeats.  You should use this instead (note position of brackets and quotes):

.classname/element_name {background:url('{site_url}images/image_name.png') right bottom no-repeat;}

Thank you. I’ve tried both suggestions, still image won’t show. Path to the image is correct as per

<a href="http://www.yoursite.com/images/photo.gif">http://www.yoursite.com/images/photo.gif</a>

I’ve tried it in a browser and image displays, yet won’t show up when I reference it in the css. I have my css as a template in EE.

Can you send a link to the actual page?

Thanks a lot. Your suggestion did it for me eventually.

Great, glad to be of help!

Thanks for your answe Roi.Agneta.  I tried a variation of it on my CSS as follows and it worked.

body{
    font-family: Arial,sans-serif;
    color: #333333;
    line-height: 1.166;    
    margin: 0px;
    padding: 0px;
    background:url('{site_url}images/uploads/3scp_78.jpg') no-repeat fixed left top;
}