How to Scale and Stretch background using CSS

Question

How to get a background in CSS to stretch or scale to fill its container size?

I am doing as below

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: 100%;
    margin:0;
}

Whats wrong in this code ?

You should define your browser-prefixed styles first, but other than that, your CSS should do exactly what you describe. — George, Jul 26 '16 at 15:09
@Quentin- background is not scaled.. I am not getting what is wrong with this code. :( — Abhishek T., Jul 26 '16 at 15:16
Please stop editing the question....we are trying to help you. — Paulie_D, Jul 26 '16 at 15:37
Is this what you are after - https://jsfiddle.net/2rjf4rum/1/ — Paulie_D, Jul 26 '16 at 15:42
@Paulie_D--->Is this compulsory to do following html { height: 100%; } — Abhishek T., Jul 26 '16 at 15:54

score 0 · Answer 1 · answered Jul 26 '16 at 15:14

Try This to reset CSS:

* {
     margin:0;
     padding:0;
     border:0;
}

body {
       background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
       background-size: cover;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
     }

score -2 · Answer 2 · answered Jul 26 '16 at 15:12

-2

Simply u can do this...

body {  
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat;
background-size: 100%;

}

answered Jul 26 '16 at 15:12

Munish Chechi

135
6

This would simply have the background fill the width of the element, not scale to fit. – George Jul 26 '16 at 15:13

score -2 · Answer 3 · edited May 23 '17 at 12:33

-2

It looks like your code is working. Just note that when you apply a fixed background position, you take the image out the dom pretty much as if it were a fixed image, so if you do:

background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat top left;
background-size: cover;

It should work as you hope. I came across this too, may be of help: CSS background-size: cover + background-attachment: fixed clipping background images

edited May 23 '17 at 12:33

Community

1
1

answered Jul 26 '16 at 15:13

AshboDev

370
2
10

No idea why this was voted down. It's a valid answer, and fills the container size, in CSS, which is what the OP asked: How to get a background in CSS to stretch or scale to fill its container size? – AshboDev Jul 27 '16 at 11:48

How to Scale and Stretch background using CSS

3 Answers3