CODEWITHSUNDEEP
htmlcsslinear-gradientsradial-gradients
Graham T
Graham T

Reputation: 966

linear and radial gradient positioning

fairly new to doing multiple gradients. I've got a linear gradient, then a radial one on top.

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #033968),
    color-stop(1, #408BCD)
);
background-image: url('../img/background-noise.png'), -o-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), -ms-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), -moz-radial-gradient(center top, farthest-side, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100px), -moz-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), -webkit-radial-gradient(center top, farthest-side, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100px), -webkit-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), radial-gradient(farthest-side at center top, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100px), linear-gradient(to top, #033968 0%, #408BCD 100%);

It works fine, but I'm wondering why the radial gradient's size is defined in pixels, but it act's like a %.

Check out: http://jsfiddle.net/tK5Ch/

When you adjust the browser size, the radial gradient moves around. I just want to make it fixed, like 100px x 100px

Any ideas what's happening?

Upvotes: 1

Views: 834

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191779

Since you have two separate axes defined, the default shape is ellipse. You need to specify that it is circle:

http://jsfiddle.net/tK5Ch/3/ (Only changed the standard gradient)

radial-gradient(circle farthest-side at center top, ...

Upvotes: 1

Related Questions