5

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!

m4n0
  • 29,823
  • 27
  • 76
  • 89
zrero
  • 129
  • 1
  • 7

2 Answers2

3

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

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
1

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/

zrero
  • 129
  • 1
  • 7