CODEWITHSUNDEEP
htmlcss
user852610
user852610

Reputation: 2265

background-cover

I am using a image like background for my web site

I put this to cover all page with the image

body.questionary{
    background: url("../img/ques.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

my image is a jpg the dimension is 703x883 and the size is 258KB

the problem is that when I see the page this image is very big, like a zoom , I dont see the image complety I only the top of it.

any idea!

Upvotes: 0

Views: 516

Answers (2)

MikeM
MikeM

Reputation: 27405

use background-size:100% 100%;

example jsfiddle

the values contain and cover maintain aspect ratio as defined by the spec

‘contain’ Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

‘cover’ Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

If you page is very tall, the background-size:cover will make the background image to scale so that it fills the whole body.

if you want it to fill the viewport only, then you will need to add inside another element (not body) and style that

<body>
   <div id="background"></div>
...
</body>

and

#background{
   position:fixed;
   z-index:0;
   top:0;
   right:0;
   bottom:0;
   left:0;
   background: url("../img/ques.jpg") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

Upvotes: 3

Related Questions