Menu
I'm redesigning a site and the different sections (header, banner image, main, etc.) have a background that stretches all the way across, however the content is contained to a certain width and that box is centered.
However, in the design the "banner image" (which is a image below the header but above the main content) will extend beyond the width of the rest of the content. At first this was easy until a need arose to have text on top of the banner image, and that text would need to line up with the rest of the text.
I cannot use CSS background image because on some pages the banner image area will be a slider, which requires tags.
I have a working solution, but it seems clunky and I was hoping to find a better method: http://jsfiddle.net/PkStg/10/
HTML:
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
<div class="banner-image-wrapper">
<img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" />
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
CSS:
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner-text-outer {
position: relative;
}
.banner-text-inner {
position: absolute;
top: 10px;
}
.banner-image-wrapper {
margin: 0 auto;
max-width: 400px;
min-width: 300px;
font-size: 0;
}
.banner-image-wrapper img {
width: 100%;
}
297
I know that you wanted to not use background-image, but here is a solution which uses that for anyone else who sees the page.
Perhaps your slider could make use of the background-image?
This should do it: jsFiddle
HTML
<body>
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
</body>
CSS
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner {
background: green url("http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg") no-repeat;
background-size: contain;
background-position: center;
min-height: 150px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
