CODEWITHSUNDEEP
htmlcss
Sergiti
Sergiti

Reputation: 151

Background-image css does not display

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?

Upvotes: 2

Views: 147

Answers (3)

Marventus
Marventus

Reputation: 874

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>

Upvotes: 1

JSuar
JSuar

Reputation: 21091

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)

Upvotes: 4

Carlos Dur&#225;n
Carlos Dur&#225;n

Reputation: 186

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.

Upvotes: 1

Related Questions