CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
zrero
zrero

Reputation: 129

Bootstrap full-width with 2 different backgrounds (and 2 columns)

It's a little bit hard to explain, that's why i also can't find the answer on Google.

I'm working with Bootstrap 3, and i need a full width background image. On top of that 2 transparent color backgrounds. I made a example image to make it all clear:

1+2: combined transparent color background

3+4: combined transparent color background

1+2+3+4: combined background image (lowest layer)

Does anyone know if this is possible and how? Thanks for your help!

Upvotes: 5

Views: 7196

Answers (2)

Paulie_D
Paulie_D

Reputation: 115099

Yes, using the techniques outlined in this question but extending it to the columns.

The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  /* prevent scrollbar */
}
.container {
  width:50%;
  margin:auto;
  margin-top: 1em;
  
  position: relative;
  overflow: visible;
}
.extra:before {
  content: '';
  display: block;
  /* override bootstrap */
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0);
}
[class*="col"] {
  border: 2px solid grey;
  min-height: 120px;
  position: relative;
}
.left:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.5)
}
.right:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 255, 0.25);
}
<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

Codepen Demo

Upvotes: 3

zrero
zrero

Reputation: 129

I think i figured it out.. Thanks to Paulie_D

Very simple example:

HTML:

<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
      <div class="row">
      <div class="col-sm-4 red20">xx</div>
      <div class="col-sm-8 red50">xx</div>
      </div>
  </div>
    <div class="cell red50">xxx</div>
</div>

CSS:

.fullwidth {
  background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
    display:table;
    width:100%;
}
.cell{
    display:table-cell;
    vertical-align:top;
}

.red20{
    background-color:rgba(255,0,0,0.2);
}

.red50{
    background-color:rgba(255,0,0,0.5);
}

Link to jsfiddle: https://jsfiddle.net/DTcHh/14045/

Upvotes: 1

Related Questions