How to get rid of overlap when transforming background and having position fixed?

Rupesh Clicker

I have a problem, as situated in the image: Problem
When I am scrolling down, the background image I have (the blue one) gets a white area, while that should be blue too. The blue background should be blue everywhere, yet because it's skewed and I am using it as a fixed background image, it does not work, somehow.

Source: Background Wallpaper

HTML
<div class="wrapper">
<p>Here comes some text and so on</p>
</div>

CSS:
.wrapper {
background: url("myimage.png");
background-attachment: fixed;
transform: skewY(3deg);
min-height: 500px;
}

The white background you can see, is the body background. It should not be there, yet it is, somehow. When I would remove background-attachment: fixed, it works, yet I want to have it fixed as I am using parallax scrolling.

So it looks like transform: skewY(3deg); and background-attachment: fixed are blocking each other. I tried adding z-index and so on, but nothing is working for me at the moment.

Is there a way to fix this?

bjrmatos

i'm having some troubles to understand where this problem happens.. what kind of jsreport recipe are you using? can you provide an example of the problem here? -> https://playground.jsreport.net

Rupesh Clicker

Sure..!!