How to move background gradient left position

Question

I am trying to move the left position of the gradient. But it is not working.

Even after adding background-position property, it does not works.

header{
height:100px;
border:1px solid blue;
background: linear-gradient(to top, #e20e0e 50px, #0000 50px);
background-position-x: 50px;
}

<header></header>

didn't understood your question :( can you provide some visuals about what you are expecting? — Uttam, Aug 21 '21 at 08:12

score 2 · Accepted Answer · answered Aug 21 '21 at 08:12

2

Turn off background-repeat.

header{
height:100px;
border:1px solid blue;
background: linear-gradient(to top, #e20e0e 50px, #0000 50px);
background-position-x: 50px;
background-repeat: no-repeat;
}

<header></header>

answered Aug 21 '21 at 08:12

Liftoff

24,717
13
66
119

score 1 · Answer 2 · answered Aug 21 '21 at 08:12

You should add background-repeat: no-repeat; property.

Check out the similar question which is answered already.

CSS Background Gradient with offset

header{
height:100px;
border:1px solid blue;
background: linear-gradient(to top, #e20e0e 50px, #0000 50px);
background-position: 50px;
background-repeat: no-repeat;
}

<header></header>

How to move background gradient left position

2 Answers2