CODEWITHSUNDEEP
csshtmlfirefoxbackground-image
Shea Christian Reinke
Shea Christian Reinke

Reputation: 23

Why is my background image not appearing?

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.

Upvotes: 2

Views: 5650

Answers (3)

Code Lover
Code Lover

Reputation: 8378

Change your background image's URL. If it's in an outside directory, use two dots instead of one (../images instead of ./images)

Upvotes: -4

Jim Jeffers
Jim Jeffers

Reputation: 17930

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/

Upvotes: 3

Rezigned
Rezigned

Reputation: 4942

You declared it wrong 

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

Should be

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

If you use background-image your only possible value is image-url not anything else.

Upvotes: 7

Related Questions