Just diving into the world of web development, I've recently started coding for my personal website. With little to no knowledge of HTML or CSS syntax, I turned to online tutorials to guide me through creating a background gradient for my site. However, the gradient is not responding as expected - it stretches when the browser window is resized, rather than staying in proportion.
I'm seeking assistance with this issue. Here's the CSS code snippet I've put together so far:
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 );
}