Background-image css does not display

Question

It's kinda embarrassing but im stuck. Here is my index.html:

<header>
    <div class="wrapper">
        <div class="top_menu">
        </div>
    </div>
</header>

And this is my style.css:

body{ 
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12 px;
}
.wrapper{ width:1680 px; margin:0 auto }
header{float:left; width:100%; min-width:1680 px} 

.top_menu{ background-image:url('../images/top_menu.jpg');}

I included the <link rel="stylesheet" type="text/css" href="css/style.css"> tag in the index. The root folder contains: the index.html , the css file and the images file (roots children). Can you help me out please?

If the css file and the image file are in the root itself then change the path to CSS `style.css` and in CSS change the image path to 'top_menu.jpg' — anpsmn, Dec 19 '14 at 20:15
Is there any content inside of .top_menu? If nothing is in there, height isn't defined and you won't see anything. — austinthedeveloper, Dec 19 '14 at 20:15
Your `top_menu` seems to have no content, and no explicit height either. Therefor it doesn't have no height, and thus no visible background. — GolezTrol, Dec 19 '14 at 20:15
You could add `min-height: 100px;` to your `.top_menu` so that you could see something — blurfus, Dec 19 '14 at 20:17
This is so embarrassing! @austinhedeveloper you were right! there is no height! Omg me! — Sergiti, Dec 19 '14 at 20:19
@Sergiti no worries. nothing to be embarrassed about... we are all here learning :) - cheers — blurfus, Dec 19 '14 at 20:21

score 4 · Accepted Answer · edited May 23 '17 at 12:20

GolezTrol has it right. The header needs an explicit height since there's nothing in the top_menu to give it a height.

.top_menu{ 
  background-image:url('https://www.google.com/images/srpr/logo11w.png');
  height: 100px;
}

If you want to set the height to the background image: Set size on background image with CSS?

Further information on how height works:

height:100% implies the element is going to have the 100% height of its parent container.

height:auto means, the element will have flexible height i.e. its height will depend upon the height of children elements of it

Examples included with the above explanation: difference between css height : 100% vs height : auto (answer)

1

Yay for me :) (and you) – GolezTrol Dec 19 '14 at 20:21

score 1 · Answer 2 · answered Dec 19 '14 at 20:26

As JSuar said, you have to make sure yor div has a minimum height or some content. Then, if yo have your images in a folder in the root level maybe you have to put this:

.top_menu{ background-image:url('/folder_name/images/top_menu.jpg');}

Also, you can check your css code in this site: http://jigsaw.w3.org/css-validator/#validate_by_input to be sure there isn't code mistakes.

Regards.

score 1 · Answer 3 · answered Dec 19 '14 at 20:29

If you would like the .top-menu div to adjust automatically (with setting the height manually), an alternative could be to use an img tag instead of the CSS background-image approach.

<header>
    <div class="wrapper">
        <div class="top_menu">
            <img src="../images/top_menu.jpg" alt="some image">
        </div>
    </div>
</header>

Background-image css does not display

3 Answers3