CODEWITHSUNDEEP
htmlcss
MrThunder
MrThunder

Reputation: 745

Have central div skewed with a background image unskewed creating a vertical diagonal effect down the centre of the page

I have 3 divs with background images and I wish to have the centre div skewed with the background image unskewed creating a vertical diagonal effect down the centre of the page.

At the moment I am unable to get the image to fill the width of the full skewed div.

It is easier to see what I mean with the Codepen here

Thanks

Html:

<div class="skew-bg-container">
      <div class="skew-bg-section first-photo">  
           <h1>Blah</h1>       
      </div>
      <div class="skew-bg-section second-photo">    
          <h1>Blah</h1>  
     </div>
     <div class="skew-bg-section third-photo">
          <h1>Blah</h1>     
     </div>
</div>

CSS:

.skew-bg-container{  
  margin-left: 7em;
  background: #111; 
  position: relative;
}
.skew-bg-section{
  width: 33.333333%;
  height: 100vh;
  float: left; 
  box-sizing: border-box;  
  position: relative;
}
.second-photo{
 background-image: url('http://lorempixel.com/g/1200/803/');
  background-size: cover;
    background-position: 50% 50%;
}
.second-photo::after{
  content: "";
  position: absolute;    
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto; 
  border-right: 6px solid tomato;
  border-left: 6px solid tomato;
  transform: skewX(-9deg);
 z-index: 3;
}
.first-photo{
 background-image: url('http://lorempixel.com/g/1200/802/');
  background-size: cover;
  background-position: 50% 50%;
}
.third-photo{
 background-image: url('http://lorempixel.com/g/1200/801/');
  background-size: cover;
  background-position: 50% 50%;
}

Upvotes: 0

Views: 467

Answers (1)

T&#250;lio Castro
T&#250;lio Castro

Reputation: 1323

You can use background-image in ::before (pseudo element) to place the real image, and change this element as well. I change the .skew-bg-container to calculate position and set it right after menu, you can See this example below:

I hope it helps

body{
  font-family: open sans;
  margin: 0;
  padding: 0;
}
h1{
  text-align: center;
  text-transform: uppercase;
  color: salmon;
}
.menu-container{
  width: 7em;
  height: 100vh;
  background: Tomato;
  position: fixed;
  z-index:1000;

  li{
    display: block;
    }
  a{
    color:#222;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
  }
}
.skew-bg-container{  
  margin-left: 7em;
  background: #111; 
  position: relative;
}
.skew-bg-section{
  width: 33.333333%;
  height: 100vh;
  float: left; 
  box-sizing: border-box;  
  position: relative;
  left: calc(-7em / 3);
}
.first-photo{
  position:relative;
}

.first-photo > *, .second-photo > *, .third-photo > *{
  z-index:200;  
  position: relative;
}

.first-photo::before{
  background-image: url('http://lorempixel.com/g/1200/802/');
  content: "";
  background-size: cover;
  background-position: 50% 50%;
  transform: skewX(-9deg);
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:10;
}

.second-photo::before{
  background-image: url('http://lorempixel.com/g/1200/803/');
  content: "";
  background-size: cover;
  background-position: 50% 50%;
  transform: skewX(-9deg);
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:10;
}
.third-photo::before{
  background-image: url('http://lorempixel.com/g/1200/801/');
  content: "";
  background-size: cover;
  background-position: 50% 50%;
  transform: skewX(-9deg);
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:10;
}
<html>
  <body>
 
<div class="menu-container">
    <nav>
      <ul>
        <p>Menu</p>
        <li>
          <a class="main-menu-link" href="#">link</a>
          <a class="main-menu-link" href="#">link</a>
          <a class="main-menu-link" href="#">link</a>
          <a class="main-menu-link" href="#">link</a>
          <a class="main-menu-link" href="#">link</a>
        </li>
      </ul>
    </nav>
  </div>

    <div class="skew-bg-container">
      <div class="skew-bg-section first-photo">  
          <h1>Blah</h1>       
      </div>
      <div class="skew-bg-section second-photo">    
          <h1>Blah</h1>  
      </div>
      <div class="skew-bg-section third-photo">
          <h1>Blah</h1>     
      </div>
    </div>
   </html>
  </body>

Upvotes: 1

Related Questions