0

I am using a image as a background. Here is the CSS for the div

#bkground {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    background: url(images/carbon_fiber2.jpg) ;
    background-repeat: no-repeat;
    background-position: center top;
    /*background: black;*/
}

In firebug it shows up as 

#bkground {
    background: url("images/carbon_fiber2.jpg") no-repeat scroll center top transparent;
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
}

Where does the tranparent setting come from and how can I have the image show up properly?

Thanks

nktokyo
  • 630
  • 1
  • 7
  • 26
  • Can you link to the live site please? Or a demo? – Stefan H Dec 18 '10 at 03:42
  • I uploaded it. What I'd like is a black background for the browser and then the image as background for the wrapper div. Currently only the browser shows up. http://www.racefightclub.com/dev/index.php – nktokyo Dec 18 '10 at 03:50
  • 1
    Since you said you are using firebug, can you check if the request for the url images/carbon_fiber2.jpg is successful under the "Net" tab? – Chandu Dec 18 '10 at 03:51

2 Answers2

1

Definitely a bad path, the image shows it to be at http://www.racefightclub.com/dev/css/images/carbon_fiber2.jpg

it should be http://www.racefightclub.com/dev/images/carbon_fiber2.jpg

so either make it ../images/carbon_fiber2.jpg

or probably /dev/images/carbon_fiber2.jpg

And this is because you are referencing the image path from within your css folder.

Stefan H
  • 6,635
  • 4
  • 24
  • 35
0

I think the transparent bit, is referring to the background colour, you can have a colour (as a backup if the image isn't found) and an image. Firebug is just adding the defaults that are applied that you haven't overriden. And the default for background-color is transparent. The image should still show up though if it's found, so I'm guessing it's not and instead the transparent background-color is being shown.

First thing I notice is that your image url is not in quotation marks in the css. I'd try that first.

So,

background: url('images/carbon_fiber2.jpg') ;

See comments, I've been reliably informed that quotes are not required.

Then, just a hunch, but are you including the css from a page on the root directory of your site? If not, you may need to make the path absolute, i.e.

background: url('/images/carbon_fiber2.jpg') ;
tjm
  • 7,500
  • 2
  • 32
  • 53
  • I agree with your second hunch. Also, quotation marks shouldn't matter. See answer at: http://stackoverflow.com/questions/2168855/css-url-whats-better – mg1075 Dec 18 '10 at 03:53
  • @mg1075. I didn't know that. Thought the quotes were required. Thanks. That'll save a few bytes when I'm on a over optimisation kick! – tjm Dec 18 '10 at 03:55
  • thanks for the help. I don't know what caused the issue, possibly some conflicting css, but I have the effect I want on a new stylesheet and will gradually migrate everything over to see what triggered it. – nktokyo Dec 18 '10 at 04:07