The linear gradient shifts when the screen size is modified

Question

My background features a linear gradient:

The issue arises when the screen size changes, as the gradient does not start at Point 0:

How can I ensure that the gradient always starts at point 0 regardless of the screen size? (Excluding mobile screens)

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

}

This is my desired outcome. If the screen size changes, it's okay for the angle to change but I just need the gradient to begin and end like this:

.linear-background{
background: linear-gradient(-5deg, #DFDFDD 10%, #3D4A6D 11%);
width: 200px;
height: 200px;
}

<html>
<div class="linear-background"></div>
</html>

Answer 1

Answer №1

Have you considered adding position:relative; to the .linear-background class in your CSS code? Here's an example:

.linear-background{
background: linear-gradient(-5deg, #DFDFDD 10%, #3D4A6D 11%);
height: 200px;
width: 200px;
}

Answer 2

Have you considered adding position:relative; to the .linear-background class in your CSS code? Here's an example:

.linear-background{
background: linear-gradient(-5deg, #DFDFDD 10%, #3D4A6D 11%);
height: 200px;
width: 200px;
}

Answer 3

Discovering clip paths was a game-changer I am amazed by how useful they are Much gratitude to @mxritz and @AHaworth for sharing

Visit Bennett Feely's Clippy website here

Answer 4

Discovering clip paths was a game-changer I am amazed by how useful they are Much gratitude to @mxritz and @AHaworth for sharing

Visit Bennett Feely's Clippy website here