Background image doesn't show when defined in stylesheet with sublime text

Question

I don't know why but my browser (firefox) don't show me my background-image, when i put it on html it works.

my editor : sublime text 2 i use MAMP too.

my css code :

.home{
background-image: url('bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Can you help me ? Thanks

Rémi

Answer 1

I think the other answers/comments are on the right track. My guess is the image is not in the right relative path to the style sheet. If your CSS file is in a folder off your web root such as http://example.com/css/site.css, then the browser is going to look for the background image at http://example.com/css/bg-img.jpg ... which would be a pretty odd place to put it.

Try putting the full path to the file in your css...something like this:

.home{
background-image: url('/images/bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

(And make sure that bg-img.jpg actually lives in /images/, of course!)

I give even odds of that fixing the problem.

If it doesn't, open the page in the browser, right click and choose "Inspect Element" or similar. Then you can dig around and see if your css looks like you expect it to, see if you're getting any 404's returned, etc. This should lead you very quickly to the problem.

Failing all that, try it in a different browser.

BTW, I don't think this could have anything to do with Sublime.

ps. If you're still battling this, please edit your question to include the full css file and html and a link to the live page.

Answer 2

1-perhaps your div.home is empty so not enough height to display it .(for example use height : 200px to see it)

2-another reason is about your img url . if its in a folder like images you should try this

.home{
background-image: url('images/bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Answer 3

if you want add background-image in sublime...

body {
    font-family:arial, helvetica, sans-serif;
    font-size: 10px;
    background-image: url(../images/background.gif);
}