CODEWITHSUNDEEP
cssbackground
xiiJaMiiE
xiiJaMiiE

Reputation: 359

How to make the background fit the whole screen?

I am writing a website as part of my college course, but I have came across a problem. I can't seem to fit whole screen.

Please visit here to see what I mean: http://jsfiddle.net/xiiJaMiiE/gM3yk/

html, body 
{
background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF),
color-stop(1, #59C5FF));
background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
background-repeat:no-repeat;
background-size:cover;
background-
}

Thanks in advance

Upvotes: 0

Views: 185

Answers (3)

deW1
deW1

Reputation: 5660

Simply add

width:  100%;
height: 100%;

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15891

Give parent height and width, and a suggested way is, to use background-size:100% 100%; rather than background-size:cover;

html, body {
    background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF), color-stop(1, #59C5FF));
    height: 100%;    /* added */
    width: 100%;    /* added */
    background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
    background-repeat:no-repeat;
    background-size:100% 100%;    /* updated*/
}

Upvotes: 0

Florian Bauer
Florian Bauer

Reputation: 636

You need to set the height of html/body to 100%;

height: 100%;

http://jsfiddle.net/gM3yk/1/

Upvotes: 4

Related Questions