Invisibility of the one element go through the other(white) as well to Background image

Question

this is my code:

body{
   background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover; 
}

.header{
   height:2em;
   width:100%;
   position:fixed;
   top:0; left:0;
   background-color:white;
}
.main{
   width:100%;height:10em;
   margin-top:5em;
   background-color:white;
}
.mainPanel{  
   width:50%;
   margin:auto;
   background-color:yellow;
   height:5em;
}

<html>
  
  <body>
    <div class="header">
    </div>
    <div class="main">
      <div class="mainPanel">
        
      </div>
    </div>
  </body>
  
</html>

I want that the yellow div is transparent and shows the background image of body. That the yellow div go trough the white div behind it and shows the background image of body. Is that possible? I hope it comes clear what i meant.

I want that the yellow div shows the background image of body — F. Dengler, Mar 01 '16 at 15:29
So you want the invisibility of the yellow element go through the white as well? — Bruno Kos, Mar 01 '16 at 15:32
Isnt this duplicate, @Paulie_D, he wants the yellow rectangle to be a window (like clipping/mask) on the white div, not just set it transparent. — L777, Mar 01 '16 at 16:00
@F.Dengler If someone's solution solved your problem, you might want to accept it as the answer using the big checkbox. For more info: [how does accepting an answer work?](http://stackoverflow.com/help/someone-answers) — Aziz, Mar 03 '16 at 14:20

score 0 · Answer 1 · edited Mar 01 '16 at 21:23

The only workaround I can think of would involve breaking your white box into three rectangles and arranging them to form a window of sorts. Here, try this out:

body {
   background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed; 
   background-size: cover; 
}

.header {height:2em;width:100%;position:fixed;top:0; left:0;}

.main {
    width: 100%;
    height: 10em;
    margin-top: 5em;
}
.mainPanel{  
    width:50%; 
    margin:auto;
    height:5em;
}

<html>
   <body>

   <div id="left-rectangle" style="background-color: white; width: 25%;height: 160px; position: absolute;"></div>
   <div class="right-rectangle" style="background-color: white; width: 25%; float: right; height: 160px;"></div>
   <div class="center-rectangle" style="position: absolute;margin-left: 25%;background-color: white;width: 50%;height: 80px;margin-top: 80px;"></div>
   <div class="header">
   </div>
   <div class="main">
   </div>

   </body>

</html>

score 0 · Answer 2 · answered Mar 01 '16 at 21:33

You could simply repeat the background, and since it has a fixed position, it will be exactly like the body background and you will not notice a difference.

body, .mainPanel {
  background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
  background-size: cover;
}

Simply extend the background of body to .mainPanel to create the illusion.

Demo: jsFiddle

html, body {padding: 0; margin: 0;}

body, .mainPanel {
  background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
  background-size: cover;
}

.header {
  height: 2em;
  width: 100%;
  position: fixed;
  top: 0; left: 0;
  background-color: #EEE;
}

.main {
  width: 100%;
  height: 10em;
  margin-top: 5em;
  background-color: white;
}

.mainPanel {
  width: 50%;
  margin: auto;
  height: 5em;
  border:1px dashed #CCC; /* just for demo */
}

<div class="header">header</div>
<div class="main">
  <div class="mainPanel">
  </div>
</div>

Invisibility of the one element go through the other(white) as well to Background image

2 Answers2