How do I stretch a background image to cover the entire HTML element?

Question

I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.

Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?

My current css is:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.

Of course, you could use JavaScript to do this dynamically, but that would be probably worse than the CSS hacks suggested by gabriel1836's link. — Jason Bunting, Oct 25 '08 at 04:42
To preserve the aspect ratio of the image you should use "background-size: cover;" or "background-size: contain;". I've built a polyfill that implements those values in IE8: http://github.com/louisremi/background-size-polyfill — Louis-Rémi, Dec 06 '12 at 14:32

score 212 · Accepted Answer · edited Mar 17 '17 at 09:55

212

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

edited Mar 17 '17 at 09:55

Hakan Fıstık

16,800
14
110
131

answered Mar 16 '11 at 20:21

Nathan

2,144
1
13
2

This also works as style tags within html elements or in css files. – Nathan Mar 16 '11 at 20:29
3

this is the best solution, ever. – Andrei Drynov Apr 20 '12 at 10:13
1

What's the difference between cover vs 100% 100% ? – Pacerier May 22 '12 at 14:13
4

100% 100% does not keep the aspect ratio of the original image. ‘cover’ scales 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. You can also use ‘contain’ to 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. – Mike737 Jun 22 '12 at 04:11
"-webkit-background-size: cover;" is not a valid CSS3 property. – VoidKing Apr 23 '13 at 15:55
The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+ - So browser prefixes should be unnecessary. http://www.w3schools.com/cssref/css3_pr_background-size.asp – Duke Sep 18 '13 at 18:44
[More detailed list of supported browsers](http://caniuse.com/#search=background-size) also check [IE 7-8 polyfill](https://github.com/louisremi/background-size-polyfill) – Oct 29 '13 at 11:52
If you need, add `height:100%` to html. – Fred K Jul 15 '14 at 13:16
@Nathan sorry for the downvote, I misclicked but I noticed it too late – STT LCU May 12 '15 at 09:24
This doesn't *shrink* images. It only enlarges them. To make the image always exactly the same size as the element use `background-size: 100% 100%`. – Timmmm Sep 15 '16 at 13:16
`{ margin: 0; padding: 0; }` without any proceeding selector is **invalid**. – tao Jun 03 '18 at 22:20
It didn't work until I changed `html {}` with `body {}` – Jun 13 '19 at 13:39

Kornel · Answer 2 · 2012-01-31T11:32:12.440

15

Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size

edited Jan 31 '12 at 11:32

answered Jul 09 '09 at 12:52

Kornel

97,764
37
219
309

1

Awesome, this is the correct answer. It probably doesn't work on IE, but I'm only targeting webkit for my project, so this is perfect :) – aehlke Mar 24 '11 at 02:37

score 9 · Answer 3 · answered May 07 '13 at 10:44

9

In short you can try this....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Where I have used few css and js...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

And it is working fine for me.

answered May 07 '13 at 10:44

Tamal Samui

738
10
14

For those who do NOT want to keep the aspect ratio! – BillyNair Feb 23 '16 at 15:52

score 6 · Answer 4 · answered Oct 25 '08 at 03:50

6

Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.

Let us know what you end up doing.

Edit: What I suggested is basically what's in gabriel's link. So try that :)

answered Oct 25 '08 at 03:50

Travis Collins

3,982
3
31
44

1

I saw this technique in action at least a decade ago. I can't imagine it wouldn't still work now. – eyelidlessness Oct 25 '08 at 03:51

score 6 · Answer 5 · answered Oct 27 '08 at 19:09

To expand on @PhiLho answer, you can center a very large image (or any size image) on a page with:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

score 5 · Answer 6 · answered Dec 22 '16 at 16:48

If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

score 3 · Answer 7 · answered Jun 12 '15 at 19:50

If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

score 3 · Answer 8 · edited Jul 15 '15 at 22:27

3

The following code I use mostly for achieving the asked effect:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

edited Jul 15 '15 at 22:27

Enamul Hassan

5,266
23
39
56

answered Jul 09 '15 at 14:33

Badar

1,430
1
15
19

4

You need `background-size: 100% 100%;` – Sablefoste Aug 10 '15 at 20:09
I don't know what browser you use, But what I have told works for me in Firefox and Chrome. – Badar Sep 02 '15 at 18:23

score 2 · Answer 9 · answered Mar 04 '14 at 08:46

2

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

answered Mar 04 '14 at 08:46

Behnam

6,244
1
39
36

score 2 · Answer 10 · answered May 28 '20 at 16:21

2

It works for me

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

answered May 28 '20 at 16:21

msk_sureshkumar

343
4
10

score 0 · Answer 11 · answered Oct 25 '08 at 14:15

You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.

score 0 · Answer 12 · answered Feb 21 '20 at 23:19

0

image{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%;

answered Feb 21 '20 at 23:19

Ebele Nwaelene

1

2

Welcome to SO! To write a better answer, add some reasoning as to why it works and show the code in action. You can also read about [writing a good answer](https://stackoverflow.com/help/how-to-answer). – displacedtexan Feb 21 '20 at 23:25

score 0 · Answer 13 · answered Apr 28 '20 at 22:16

Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp Scroll down to the part that says:

If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area

There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.

How do I stretch a background image to cover the entire HTML element?

13 Answers13

Linked