Background image problems

Background image is not loading

[slothmister]

Hello

I am new here so please be nice :)

Anyway, I am writing my own website in asp.net and am having problems with the CSS in my master page. Basically I have a header that loads fine, a footer that loads fine, and a general page body that loads fine, but I also have a central content div which should have a background image, but for some reason it does not load.

The CSS is....

#generalContent {
width: 980px;
background: url(/Kevin/images/img02.jpg);
}

The Master page has a div, <div id="generalContent">, which has 2 other div's nested inside, one is a sidebar with all code in the master page including some background images that are working (just menu headers) and the other is the content div created by the asp.net which is, at the moment empty.

Any advice?

[hbmehta]

Looking at this css, only problem I can think of is the image path. Check the image path is correct or not and only background should work but try this.
background-image: url(path).

[slothmister]

Thank you for your reply.
I tried that and all other variations I can think off. The path is perfect, I got all my images in the same folder and all work fine, except that one.

Also, it works fine in Visual Studio 2010 but not in Firefox.

[rocknbil]

Welcome aboard slothmister, I'm going to hit the obvious, if the conditions differ, sorry.

This should work on your server


background: url(/Kevin/images/img02.jpg);

... because a server knows the leading slash means to start at the domain root. But it won't work if you're checking it on your local computer, your computer doesn't have a domain root as it's not a web server. So, seeing that your images are in images, you need to temporarily modify the path - it has to be relative to the CSS file.

So if you have

style.css
index.html
images

When viewing locally, you want

background: url(Kevin/images/img02.jpg);

But if you have

css/style.css
images
index.html

you want

background: url(../Kevin/images/img02.jpg);

Switch it back when you deploy it, the leading slash is a good approach.

[slothmister]

Thank you again for the reply. My site is done using asp.net so is always viewed via a server.

I managed to solve the problem, for some reason the CSS was not inheriting the size of the background image so I had to specifically declare a height and width. I am not 100% sure as to why I needed to do that but it solved my problem.

Thank you all for your help.