Center background gradient

Question

I am a newbie to web development and I have just started coding for my own personal website. I absolutely do not know any syntax for html nor css. From reading and watching tutorials online, I have managed to create the background gradient of my website but the gradient is not behaving as I wanted it to. I want the gradient to remain the same proportion when the browser window is resized. Right now the gradient is stretched according to window size.

Please help. Here is the code I have so far for css

 html {
    height: 100%;
    background: #499bea;
}

body
{
    float:left;
    position:relative;
    height: 100%;
    width: 100%;
    background-position: 0px 0px;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background: #499bea;
    background: -moz-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, #499bea), color-stop(100%, #00438a));
    background: -webkit-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -o-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -ms-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: radial-gradient(ellipse at center, #499bea 0%, #00438a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#00438a', GradientType=1 );

}

@MarcAudet Absolutely true, but that has nothing to do with the answer (hence in a comment), right? Personally, "same proportion" in this question doesn't make sense to me. — , Jun 14 '14 at 22:19
Note that if you use `background`, you are overriding all previous `background-*` properties. Either use `background-image` for the gradient, or get rid of the other properties if you don't need them. — Oriol, Jun 14 '14 at 22:25

score 0 · Answer 1 · answered Jun 14 '14 at 22:23

Getting rid of the height and switching the background-size to cover and a couple other tweaks should do the trick:

 html {
height: 100%;
background: #499bea;
}

body
{
    float:left;
    position:relative;
    /* Removed height */
    width: 100%;
    margin: 0;
    background: no-repeat center center fixed;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background: #499bea;
    background: -moz-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, #499bea), color-stop(100%, #00438a));
    background: -webkit-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -o-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -ms-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: radial-gradient(ellipse at center, #499bea 0%, #00438a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#00438a', GradientType=1 );

}

.container { height: 900px; }

JSFiddle: http://jsfiddle.net/LJY9y/

score 0 · Answer 2 · answered Jun 14 '14 at 22:23

0

If you don't want it to be stretched, use circle instead of ellipse:

background: radial-gradient(circle at center, #499bea 0%, #00438a 100%);

Demo

answered Jun 14 '14 at 22:23

Oriol

274,082
63
437
513

Center background gradient

2 Answers2