倾斜的div不需要的透明空间

Question

I'm trying to create a site with skewed/rotated divs, but I've got a problem with the ones that have fixed background image.

The code describes the issue best:

https://codepen.io/poveu/pen/pWJwYx

<div class="skewed_fixed">
        <div class="content">
      This parent's background is fixed. When you scroll down, there's still that white body background above, and this text scrolls into it.
    </div>
</div>
<div class="skewed_normal">
    <div class="content">
      This background is not fixed and behaves properly.
    </div>
</div>
<div class="margin"></div>

.skewed_fixed {
    background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
    background-attachment: fixed;
    transform: skewY(-3deg);
    background-size: cover;
    width: 100%;
}

.content {
    height: 300px;
}

.skewed_normal {
    background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
    transform: skewY(-3deg);
    background-size: cover;
    width: 100%;
}

.margin {
    height: 600px;
}

(background-size: cover and width: 100% is here just to make the bg fit 100% width; margin div is to make the page scrollable)

I want to scroll the whole div with its background "mask" so the white space disappears when scrolling down.

I've tried to mix it with transform-origin: left; but then the transparent space appears on the bottom of the div.

Is there any easy (non JS) way to achieve what I want?

Answer 1

You could play on positions and margin or padding to compensate the empty space :

 .skewed_fixed {
    background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
    background-attachment: fixed;
    transform: skewY(-3deg);
    background-size: cover;
    width: 100%;
    background-position: 0px -100px;
    top:-50px;
    position:relative;
    margin-top:50px;
}

Answer 2

I had used translate property with skew property. Try this.

 .skewed_fixed { background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat; background-attachment: fixed; transform: skewY(-3deg) translate(0px, -50px); background-size: cover; width: 100%; } .content { height: 300px; padding-top: 60px; } .skewed_normal { background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat; transform: skewY(-3deg) translate(0px, -50px); background-size: cover; width: 100%; } .margin { height: 600px; } 

 <div class="skewed_fixed"> <div class="content"> This parent's background is fixed. When you scroll down, there's still that white body background above, and this text scrolls into it. </div> </div> <div class="skewed_normal"> <div class="content"> This background is not fixed and behaves properly. </div> </div> <div class="margin"></div>