Banner help in CSS and HTML

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

  •  03-10-2022
  •  | 
  •  

Question

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 :)

Was it helpful?

Solution

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

OTHER TIPS

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top