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
– anpsmn, Commented Dec 19, 2014 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
– austinthedeveloper, Commented Dec 19, 2014 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
– GolezTrol, Commented Dec 19, 2014 at 20:15
You could add min-height: 100px; to your .top_menu so that you could see something — blurfus
– blurfus, Commented Dec 19, 2014 at 20:17
This is so embarrassing! @austinhedeveloper you were right! there is no height! Omg me! — Sergiti
– Sergiti, Commented Dec 19, 2014 at 20:19

Community · Accepted Answer · 2017-05-23 12:20:33Z

4

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)

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Dec 19, 2014 at 20:19

JSuar

21.1k4 gold badges43 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GolezTrol Over a year ago

Yay for me :) (and you)

Carlos Durán · Accepted Answer · 2014-12-19 20:26:19Z

1

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.

answered Dec 19, 2014 at 20:26

Carlos Durán

18610 bronze badges

Comments

Marventus · Accepted Answer · 2014-12-19 20:29:19Z

1

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>

answered Dec 19, 2014 at 20:29

Marventus

8491 gold badge7 silver badges14 bronze badges

Collectives™ on Stack Overflow

Background-image css does not display

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related