Question 212014 in Html Question posted in
Some basic documentation can be found here.

Html – Linear gradient not fixed when screen size changes

I have a linear gradient in my background:

https://prnt.sc/9mmoSmAazP8A

The problem is that when the screen size changes, my gradient is not starting at Point 0:

https://prnt.sc/S9fGUR2Ta3l9

How can I assure that the gradient starts at point 0 all the time, no matter the screen size? (Mobile screens not included)

body #screen-background{
    
    background: linear-gradient(-5deg, #DFDFDD 10%, #3D4A6D 11%);

}

This is what I want. If screen size changes, the angle could change, no problem. I want just that the gradient begins and ends like this:

.linear-background{
background: linear-gradient(-5deg, #DFDFDD 10%, #3D4A6D 11%);
width: 200px;
height: 200px;
}
<html>
<div class="linear-background"></div>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I didn't know clip paths This is really very usefull Thanks @mxritz and @AHaworth

    https://bennettfeely.com/clippy/


  2. 0

    Maybe you could try putting position:relative;
    on the .linear-background selector, like this:

    .linear-background{
background: linear-gradient(-5deg, #DFDFDD 10%, #3D4A6D 11%);
height: 200px;
width: 200px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search