Grow your CSS skills. Land your dream job.

Problem with fluid banner/header

  • # July 2, 2014 at 4:14 pm

    Hi all

    Am really stuck on something and wonder if anyone can help? Here’s a link to what I’ve got so far:

    http://djdust.com/css/test.htm

    If you stretch and shrink this window, the banner (that’s a background graphic) grows and shrinks with it which is all good so far. The reason I have it as a background graphic is because I want to have a set of icons at the top right of the page overlaid over it (one test icon is there already and also shrinks and grows accordingly)…

    The massive problem as you can see is that I’m stuck with having to set the height of the “header” div to be 200px but this creates a massive white gap between it and the “main” div if the screen is shrunk as it’s still rigidly sticking to that height. If I remove the height setting, the banner disappears altogether…

    Can anyone advise how to fix this? Here’s the code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title></title>
    <meta charset="utf-8" />
    <style>
    
    #container {
        border-left: 1px solid #000000;
        border-right: 1px solid #000000;
        width: 100%;
        max-width: 800px;
        margin: 0px auto;
    }
    
    #header {
        background-image: url(images/test_banner.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 200px;
    }
    
    #main  {
        background-color: #CCCCCC;
    }
    
    #icon_area {
        width: 15%;
        text-align: right;
        float: right;
    }
    
    #icon_area img {
        margin-top: 1em;
        margin-right: 1em;
        width: 50%;
        height: 50%;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="header">
            <div id="icon_area"><img src="images/test_icon.png" /></div>
        </div>
        <div id="main">
            <p>main body</p>
            <p>main body</p>
            <p>main body</p>
            <p>main body</p>
            <p>main body</p>
            <p>main body</p>
        </div>
    </div>
    
    </body>
    </html>
    # July 2, 2014 at 4:28 pm

    Don’t give the header a height and don’t put the banner in as a background image.

    Instead, just use a regular image for the banner and scale it in percentages, so that the header shrinks with the image when you resize the screen.
    The icons can simply be placed absolutely (top right of the header).

    Here’s basically what I mean: http://codepen.io/senff/pen/Afumr

    # July 2, 2014 at 4:46 pm

    Perfection! Thank you so much… :D

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".