By renade on

I am new to css but I have been trying to use css to insert an image into a class.

.buttons {
border: 1px solid #999999;
background-image: url(/themes/xtemplate/iis/twor_graphics/grad1.gif);
background-repeat: repeat-x;
background-position: left top;

For some reason it doesn't work. I think the the url address is wrong but i copied and pasted it from where I source my banner/logo and then changed the name of the image file:

img src="themes/xtemplate/iis/twor_graphics/twor_logo1.jpg" alt="Logo"

This works, but to get an image to show in the background of a block doesn't. What am I doing wrong? Is there a better way of doing this?

Comments

Dries’s picture

Dries commented

Depending on the location of your CSS file, you should use ...

background-image: url(twor_graphics/grad1.gif);

... or ...

background-image: url(grad1.gif);

... instead of ...

background-image: url(/themes/xtemplate/iis/twor_graphics/grad1.gif);
renade’s picture

renade commented

Thank you Dries...
this one worked...
background-image: url(grad1.gif);

anthonylicari’s picture

anthonylicari commented

Just remember that in your style sheet any images or files called is relative to the position of the stylesheet. So if the image is in the same folder you just follow what Dries said. So you might have

themes/garland/images/background.gif

Like Dries said, if your style sheet is in the Garland portion of that directory, you only need to do this...

images/background.gif

Since that is relative to your stylesheet. If you wanted to go backwards though because maybe your image is in a different folder on the root, it's still relative from your stylesheet. So traveling backwards you would do this

../../otherImages/background.gif

Make sense?

heather’s picture

heather commented

in the example shown above, you don't have the closing curly bracket..

}

so it won't work without that.

you probably just copied the top part, but i thought i might point it out in case anyone else wants to try that example.