background gradient & rotation create strange overlay

Asked 11/10, 2014 at 8:22 Answered 11/10, 2014 at 13:59

I use a bar with a rotated square as separator on my site.

The background-color is a gradient and fixed, so it creates a nice scroll effect, but when the rotated div reaches the view-port top, a strange gradient overlay appears.

Just look at it(you need to scroll slowly until the separator reaches the top of the view-port): http://jsfiddle.net/nff2fjf7/4/

body {
    height:800px;
}
.seperator {
    margin:100px 0 0 0;
    background-attachment: fixed;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    width:100%;
    height:40px;
    text-align: center;
}
.triangle {
    width:40px;
    height:40px;
    display: inline-block;
    margin: 10px 0;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-attachment: fixed;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
}

<body>
    <div class="seperator">
        <div class="triangle"></div>
    </div>
</body>

Superscription answered 11/10, 2014 at 8:22 Comment(0)

body {
    height:800px;
}
.seperator {
    margin:100px 0 0 0;
    background-attachment: fixed;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    width:100%;
    height:40px;
    text-align: center;
}
.triangle {
    width:40px;
    height:40px;
    display: inline-block;
    margin: 10px 0;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-attachment: fixed;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-repeat:no-repeat;
}

<body>
    <div class="seperator">
        <div class="triangle"></div>
    </div>
</body>

setting background-repeat:no-repeat on .triangle seems to cure it at the top of the page, but the issue is still present at the bottom :/

Fiddle

Inclinometer answered 11/10, 2014 at 13:59 Comment(1)

well thank you at least the top problem is solved. yeah true i didn't mentioned that this is also happening at the end of the page. – Superscription 11/10, 2014 at 14:38

I'm no pro with anything to do with web designs, and i have little idea on what each specific statement does, however, here's what I can tell you.

Your shapes DO NOT display with gradient. The colors you use for gradient are red/blue, and only blue is displayed
comment the following line from triangle and you'll notice your square you use for triangle actually gets a gradient! (blue to red gradient)

background-attachment: fixed;

Also, if you set background-attachment mode to scroll everywhere you'll notice the square you use for triangle gradient doesn't display as you want it to.

if you are fine with colors, you don't really need a gradient.

Edit: I've messed around with your code and if you want to keep the gradient (top to bottom) you can use this code which is your code with scroll background attachment and the triangle modified:

body {
    height:800px;
}
.seperator {
    margin:100px 0 0 0;
    background-attachment: scroll;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    width:100%;
    height:40px;
    text-align: center;
}
.triangle{
    width: 0; 
    height: 0; 
    display: inline-block;
    margin: 40px 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid rgba(231, 52, 76, 1);
}

Penitence answered 11/10, 2014 at 8:55 Comment(3)

If you scroll the page, the gradient colour changes. That's what background-attachment:fixed is for. I modified the fiddle slightly. Have a look at this fiddle and you can see the colour change when scrolled. – Laforge 11/10, 2014 at 9:16

I can tell you why it happens, but I've got no idea how to "properly" fix it at the moment. You get this behavior because your rotated square goes into negative screen coordinates and it gets colors recalculated from original top, not the rotated one. As the square goes off screen the invisible part of the square (or the part that WOULD be invisible if it wasn't rotated) acts as if it is drawn on the opposite side. So, if you put your square at the top of the screen so it is barely visible the invisible part will act as if it is on the bottom of the screen and vice versa. – Penitence 11/10, 2014 at 10:9

If scroll the square all the way to the bottom you will see similar behavior. – Penitence 11/10, 2014 at 10:14

Recommended topics

Hot tags