Linear gradient crisis

[OBXjuggler]

Hello,

please see

https://forallthetime.com/BI9/location.html

as you scroll down the gradient breaks

see

https://forallthetime.com/BI6/location.html

THIS is how i want my gradient

this started after i embeded a google map using API

tell me, does that look in order?

you can clearly see

how to resolve the gradient issue

BIG step for me here!

i sincerly appreciate your help, seriously

[Martyr2]

In your style.css file, starting in your definition on line 10, after you set the linear gradient, add the following definitions…

background-repeat: no-repeat;
background-attachment: fixed;

This will cause your gradient to not repeat and then be fixed so that will stay the same as you scroll on top of it. Gradients naturally won’t extend beyond the viewport from what I understand.

P.S. I applied the two styles to your code and knows it works. So put it in and give it a try.

P.S.S As for your map, try to float it left.

[OBXjuggler]

@Martyr2

background-repeat: no-repeat;
background-attachment: fixed;

did the job!

@Martyr2

This will cause your gradient to not repeat and then be fixed so that will stay the same as you scroll on top of it

thanks for teaching me something new

[PaulOB]

@OBXjuggler

thanks for teaching me something new

The reason your gradient broke is because of the height:100% on html and body which effectively means that they are only 100& and everything overflows. usually this isn’t a problem on html and body as backgrounds are propagated but the linear gradient breaks in this scenario.

You could remove the height:100% but then the gradient is only as tall as the content. As @Martyr2 suggests the fixed attachment will work but that will present an issue on mobile devices as they will stretch the gradient over the whole document which on a long document means you don’t get the same effect.

It’s not a big issue but I like to have the gradient over the viewport only and use the following method.

It use the :before element on the body to place the element as position: fixed which means it no longer needs the background-attachment: fixed and works the same on desktop and mobile.

(It’s a good fix for when you want a background image to be fixed and cover the viewport as you can’t do this with background-attachment:fixed on mobile as background-size:cover and background-attachment:fixed don’t work together properly on a mobile viewport.)

Lastly note that when you used this rule:

html, body {
    margin: 0;
    padding: 0;
    background: linear-gradient(
      45deg,
      rgba(153, 176, 233, 1) 35%,
      rgba(0, 151, 255, 1) 72%);
    padding: 0;
}

You are effectively applying 2 linear gradients to the page. One to the html element and one to the body element. You don’t really want to do both as linear gradients are quite resource intensive and will slow the scrolling of the page down if you overdo it.