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



  • 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?


  • administrators

    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



  • Sure..!!


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.