Banner help in CSS and HTML

StackOverflow https://stackoverflow.com/questions/21403490

  •  03-10-2022
  •  | 
  •  

题

I have a header div tag background, and I'm trying to put the banner div tag over it so it would show the image. but it's not showing up. I don't know how to fix it.

Header tag CSS:

#header-wrapper
    {
        overflow: hidden;
        width: 650x;
        background: #659EC7 url(images/overlay.png) repeat;
    }

    #header
    {
    }

Banner tag CSS:

#banner
{
background: url(images/banner.png);
}

And here's my Header HTML Code. I placed the banner div tag inside it:

<body>
<div id="header-wrapper">
    <div id="header" class="container">
            <div id="banner">
        </div>
        <div id="logo">
            <span class="icon icon-fire"></span>
            <h1><a href="#">EXO</a></h1> </div>
        <div id="menu">
            <ul>
                <li class="current_page_item"><a href="index.php?page=home" title="">Home</a></li>
                <li><a href="index.php?page=gallery" title="">Gallery</a></li>
                <li><a href="index.php?page=contact" title="">Contact</a></li>
                <li><a href="index.php?page=logreg" title="">Login/Register</a></li>
            </ul>
                    </div>
        </div>
</div>

Please help me! THanks :)

有帮助吗？

解决方案

You have the image as a background on .banner. But it has no width or height. Try:

#banner {
   width: 100%;
   height: 100%;
   background: url(images/banner.png);
}

Use this one if .banner parent has a height, If not -

#banner {
   width: 100%;
   height: 80px;
   background: url(images/banner.png);
}

We can use this, setting the width and height for .banner.

Background images do not set width and height so without them the div is not shown.

You also haven't given .header any height and width. So for my width: 100%; & height: 100%; to work you would need to set that. Or just set .banner width and height in px

Also for the header-wrapper you haven't put px (maybe a typo).

#header-wrapper {
      overflow: hidden;
      width: 650px;
      background: #659EC7 url(images/overlay.png) repeat;
 }

Setting width and height on .banner.

DEMO HERE

Setting width and height on .banner,.header and the wrap.

DEMO HERE

其他提示

You have to set a width and height to your banner div.

#banner{
width: 100%;
height: 400px;
}

Note that the height have to be fixed for this to work.

fiddle: http://jsfiddle.net/8syUX/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top