I have simple html page with body and header elements:
<body>
<header class="logoBar"></header>
</body>
I try to add background image to header. If i do:
.logoBar {
background:url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;
}
It doesn't show image. But if i make:
body {
background:url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;
}
I see image. Why doesn't it work for header?
Thank you.
Try setting a width and height on your header element's css.
.logoBar {
width: 100%;
height: 250px; <!-- Your image height goes here...
background:url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;
}
You have to set a width and height for the header. If it has no content it will simply be 0px wide and 0px tall.
.logoBar {
background:url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;
width: 900px;
height: 300px;
}
now define value of your class .logobar
as like this
.logobar{display:block;}
and define width and height according to @WDffy and @Cristy
来源：https://stackoverflow.com/questions/15969870/background-image-doesnt-show-for-header