CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
ProfK
ProfK

Reputation: 51094

Stretched images and centered content with Bootstrap

I need to lay out a web page with two images that must stretch to fill the available browser window, but with text content that is centred in the page. So far, the only ways I seem to be able to do this are, a) combine the two images into one, and set this as a background image for body, then carefully vertically position the middle band of content to fit the gap between images, or, b) to nest a container (fixed) div inside a container-fluid holding the image and the fixed holding the text content. I have, however, seen dire warnings and scorn poured on those who advocate nesting bootstrap containers.

This image may help convey what I need:

enter image description here

'Image 1' must stretch across the entire window, with the content remaining centered, the same with 'Image 2', with a plain band of white vertically between the images, and a plain band of grey right across the screen at the bottom.

Upvotes: 13

Views: 745

Answers (4)

Maciej Kwas
Maciej Kwas

Reputation: 6439

The simpliest example that I might think of, I assumed you don't know the size of your background images, that's why I lay them inside background div that's not affecting page flow, while on top there's natural content

Demo

<div class="images-wrapper">
    <img src="..." alt="">
    <img src="..." alt="">  
</div>

<div class="container">
      .......
</div> <!-- /container -->

body {
    background:#ccc;
}
.images-wrapper {
    position:absolute;
    top:0;
    left:0;
    right:0;
    background:#fff;
    z-index:0;
}
.images-wrapper img {
    display:block;
    width:100%;
    height:auto;
    margin-top:30px;
}

.container {
    z-index:2;
    position:relative;
    background:#fff;
}

Upvotes: 1

CodeBriefly
CodeBriefly

Reputation: 1020

You can try this.

Note that you have to apply some custom css as required by your design needs. Follow the example:

.container-fluid {
  padding: 0;
}
.container-fluid.wrapper {
  padding-top: 100px;
}
.ht33 {
  height: 200px;
}
.container.content {
  width: 970px;
  position: absolute;
  height: 800px;
  background: gray;
  color: #fff;
  top: 0;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid wrapper">
  <div class="container content"></div>
  <div class="container-fluid bg-primary ht33"></div>
  <div class="container-fluid bg-warning ht33"></div>
  <div class="container-fluid bg-danger ht33"></div>
</div>

Screenshot

Upvotes: 9

nikk wong
nikk wong

Reputation: 8690

You could try to do it like this:

http://jsfiddle.net/kqoonr24/1/

You may have to adapt it to fit your needs, but this is the basic idea. :-)

Basically, you'll want to have a div that acts as a background and houses the individual divs which make up each background element.

Then, after that you'll want to have a foreground div which houses the actual content.

html,
body,
.wrapper,
.foreground,
.background {
  height: 100%;
  width: 100%;
}
.foreground {
  background-color: green;
  max-width: 400px;
  margin: 0 auto;
}
.background {
  position: absolute;
  z-index: -1;
}
.background > * {
  height: 33%;
  content: '';
}
.background-element-1 {
  background-color: blue;
}
.background-element-2 {
  background-color: red;
}
.background-element-3 {
  background-color: orange;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<body>
  <div class="wrapper">
    <div class="background">
      <div class="background-element-1"></div>
      <div class="background-element-2"></div>
      <div class="background-element-3"></div>
    </div>
    <div class="foreground">
      <div class="foreground-inner">
        I am your text!
      </div>
    </div>
  </div>
</body>

You will likely need to adjust it as I made quite a few assumptions—let me know if you need any more help.

Upvotes: 1

Alvin Magalona
Alvin Magalona

Reputation: 771

I used row class to the BGs to have a Grid feel on them and also eliminate the padding.

HTML

<div class="container-fluid wrapper">
    <div class="container content bg-primary"></div>
    <div class="row bg-success bg"></div>        
    <div class="row bg-warning bg"></div>        
    <div class="row bg-danger bg"></div>        
</div>

CSS

.container-fluid.wrapper {
    padding-top: 100px;
}
.bg {
    height: 200px;
}
.container.content {
    width: 970px;
    position: absolute;
    height: 800px;
    color: #fff;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

Upvotes: 2

Related Questions