Problem with fluid banner/header - CSS-Tricks

This topic is empty.

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

Author

Posts
July 2, 2014 at 4:14 pm #174414
dust
Participant
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 #174416

Senff
Participant

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 #174417

dust
Participant

Perfection! Thank you so much… :D
Author

Posts

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

The forum ‘CSS’ is closed to new topics and replies.