Question

I am trying to place a repeating gradient .png as a background-image for a div.

CSS:

background-image: url(./images/backbar.png) repeat-x;

I also tried it with quotes, and there was no change. This is what the dragonfly interface in Opera says:

#final_bar { 
    color: rgb(0, 0, 0);
    display: block;
}
nepan.css:43
.bar { 
    clear: both;
    margin-left: auto;
    margin-right: auto;
    width: 771px;
}
default values
div { 
    <strike>display: block;</strike>
}
Inherited from div
nepan.css:31
.wrapper { 
    <strike>color: rgb(40, 40, 40);</strike>
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
}

^The style property isn’t even showing up, so am I mistyping?

Now, as per the various questions:

1. My HTML and CSS files are in the same directory (you will note that the image is used in the div–I did that to determine if the file was accessible – it is).

2. I have tested this page in IE/Chrome/Firefox/Opera now. The image itself shows up as an individual image, except in Firefox.

3. http://nepaninjas.com This code is live with the error at this time.

Answer 1

Background-image explicitly lets you set the background image and nothing else. Utilizing the background property will let you apply multiple settings to the background in one line.

background: url(./images/backbar.png) repeat-x;

Here’s the spec for what you can specify in the background property:

background: { background-color background-image background-repeat background-attachment background-position | inherit } ;

Also, keep in mind that the path in the url is relative to the location of the CSS file itself. If you can I recommend utilizing the http root for your file paths. This allows your CSS to be more flexible if you were to restructure or move your CSS file the image paths will not subsequently need to be updated. So if you can manage I would recommend:

background: url(/images/backbar.png) repeat-x;

Provided your images are located in http://domain.com/images/