Reactive background image in full width div
source link: https://www.codesd.com/item/reactive-background-image-in-full-width-div.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Reactive background image in full width div
I'm trying to figure out how to make a background-image in a div full width and responsive. The background-image is expanding across the width of the page (and is responsive), but the height of the image isn't its full height. It seems like it's being cut-off somehow. I'm using bootstrap framework, and the reason I'm trying to do this is I want to overlay some text on the image. I've tried so many different things but cant seem to figure it out, help!
<div class="bg-image">
<div class="container">
<div class="row-fluid">
<div class="span12">
<h1>This is some text</h1>
</div>
</div>
</div>
</div>
.bg-image {
background: url(img/image.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-height: 450px;
}
Here is one way of getting the design that you want.
Start with the following HTML:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="nav">nav area</div>
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<h1>This is centered text.</h1>
</div>
<div class="main">main area</div>
</div>
</div>
</div>
Note that the background image is now part of the regular flow of the document.
Apply the following CSS:
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
.bg-image h1 {
position: absolute;
text-align: center;
bottom: 0;
left: 0;
right: 0;
color: white;
}
.nav, .main {
background-color: #f6f6f6;
text-align: center;
}
How This Works
The image is set an regular flow content with a width of 100%, so it will adjust itself responsively to the width of the parent container. However, you want the height to be no more than 450px, which corresponds to the image width of 1200px, so set the maximum width of the image to 1200px. You can keep the image centered by using display: block
and margin: 0 auto
.
The text is painted over the image by using absolute positioning. In the simplest case, I stretch the h1
element to be the full width of the parent and use text-align: center
to center the text. Use the top or bottom offsets to place the text where it is needed.
If your banner images are going to vary in aspect ratio, you will need to adjust the maximum width value for .bg-image img
dynamically using jQuery/Javascript, but otherwise, this approach has a lot to offer.
See demo at: http://jsfiddle.net/audetwebdesign/EGgaN/
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK