CODEWITHSUNDEEP
css
3gwebtrain
3gwebtrain

Reputation: 15303

How to move background gradient left position

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>

Upvotes: 0

Views: 289

Answers (2)

Prajwal
Prajwal

Reputation: 4000

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>

Upvotes: 1

Liftoff
Liftoff

Reputation: 25392

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>

Upvotes: 2

Related Questions