How to stretch the background image to fill a div

Question

I want to set a background image to different divs, but my problems are:

The size of image is fixed(60px).
Varying div's size

How can I stretch the background-image to fill the whole background of the div?

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

Check the code here.

score 201 · Accepted Answer · edited Dec 07 '18 at 19:04

201

Add

background-size:100% 100%;

to your css underneath background-image.

You can also specify exact dimensions, i.e.:

background-size: 30px 40px;

Here: JSFiddle

edited Dec 07 '18 at 19:04

Devin Rhode

23,026
8
58
72

answered Jun 27 '12 at 10:00

hendos43

2,090
1
14
14

5

IE not support this. Wt to do? – KarSho Mar 21 '13 at 05:12
9

it doesn't work, see bellow for a better answer: background-size:100% 100%; – chriscatfr Jun 23 '14 at 19:23
Why is it multiplying instead of stretching the image to fit the container: http://jsfiddle.net/qdzaw/424/ – SearchForKnowledge Oct 24 '14 at 19:01
1

You need to add `background-repeat: no-repeat;` – Rorrik Jan 29 '15 at 03:37
@KarSho for OLD IEs => strech image to parent: make `` element with these css: `position:absolute; left:0; top:0; width:100%; height:auto;`, this element should be first child of its parent :) Or `height: 100%;` if you want 100% spread - might cause deformation .... – jave.web Jun 25 '15 at 01:47
1

hendo, your JSFiddle is no longer working (dead links to hootsuite), can you please update it? – TylerH Aug 04 '15 at 16:35
It didn't work for me until I used in-line CSS. That fixed the problem for me. – Anonymous Aug 04 '18 at 23:44
this does not work, answer below background-size:cover works – shelbypereira Sep 27 '22 at 14:18

Ouadie · Answer 2 · 2014-01-14T11:29:28.667

88

You can use:

background-size: cover;

Or just use a big background image with:

background: url('../images/teaser.jpg') no-repeat center #eee;

edited Jan 14 '14 at 11:29

answered Jan 14 '14 at 11:07

Ouadie

13,005
4
52
62

5

cover doesnt strech, it can cut picture – drdrej Jul 02 '16 at 19:24
2

I don't know what you're trying to do with your background img but `background-size: cover; background-position: center` will fill the background of the `div` without stretching the image – Ouadie Nov 24 '16 at 16:32
1

Works great for pictures where stretching would disform the image! – Stijn Van Bael Apr 05 '17 at 09:18

score 53 · Answer 3 · edited Jun 19 '19 at 23:15

Modern CSS3 (recommended for the future & probably the best solution)

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

Max. stretch without crop nor deformation (may not fill the background): background-size: contain;
Force absolute stretch (may cause deformation, but no crop): background-size: 100% 100%;

"Old" CSS "always working" way

Absolute positioning image as a first child of the (relative positioned) parent and stretching it to the parent size.

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

Equivalent of CSS3 `background-size: cover;` :

To achieve this dynamically, you would have to use the opposite of contain method alternative (see below) and if you need to center the cropped image, you would need a JavaScript to do that dynamically - e.g. using jQuery:

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

Practical example:
css crop like example

Equivalent of CSS3 `background-size: contain;` :

This one can be a bit tricky - the dimension of your background that would overflow the parent will have CSS set to 100% the other one to auto. Practical example: css stretching background as image

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

Equivalent of CSS3 `background-size: 100% 100%;` :

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

PS: To do the equivalents of cover/contain in the "old" way completely dynamically (so you will not have to care about overflows/ratios) you would have to use javascript to detect the ratios for you and set the dimensions as described...

score 24 · Answer 4 · edited Oct 29 '17 at 21:23

24

For this you can use CSS3 background-size property. Write like this:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

Check this: http://jsfiddle.net/qdzaw/1/

edited Oct 29 '17 at 21:23

Nisse Engström

4,738
23
27
42

answered Jun 27 '12 at 09:57

sandeep

91,313
23
137
155

1

IE not support this. Wt to do? – KarSho Mar 21 '13 at 05:16
4

For IE use **IMG** tag give position absolute with height & width 100%. – sandeep Mar 21 '13 at 05:34

score 22 · Answer 5 · edited Oct 29 '17 at 21:24

22

You can add:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

You can read more about it here: css3 background-size

edited Oct 29 '17 at 21:24

Nisse Engström

4,738
23
27
42

answered Jun 27 '12 at 10:05

Xella

1,283
10
10

background-size is a css3 and not supported in all browsers – Mahdi Jazini Nov 24 '16 at 16:22

score 3 · Answer 6 · answered Aug 26 '15 at 09:38

3

by using property css:

background-size: cover;

answered Aug 26 '15 at 09:38

Đọc truyện hay

1,913
21
17

background-size is a css3 and not supported in all browsers – Mahdi Jazini Nov 24 '16 at 16:23

score 2 · Answer 7 · edited Jan 22 '16 at 04:01

2

body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}

edited Jan 22 '16 at 04:01

trapper

11,716
7
38
82

answered Jan 21 '16 at 21:58

Zen Of Kursat

2,672
1
31
47

jagan reddy · Answer 8 · 2018-07-20T04:30:22.303

2

Use: background-size: 100% 100%; To make background image to fit the div size.

edited Jul 20 '18 at 04:30

answered Jul 20 '18 at 02:56

jagan reddy

61
5

score 0 · Answer 9 · answered Oct 29 '17 at 19:13

0

To keep the aspect ratio, use background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}

answered Oct 29 '17 at 19:13

atulmy

1,364
15
23

score 0 · Answer 10 · edited Oct 29 '17 at 21:32

0

Try something like this:

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}

edited Oct 29 '17 at 21:32

Adil B

14,635
11
60
78

answered Oct 29 '17 at 19:51

Deejay

907
1
6
10

How to stretch the background image to fill a div

10 Answers10

Modern CSS3 (recommended for the future & probably the best solution)

"Old" CSS "always working" way

Equivalent of CSS3 `background-size: cover;` :

Equivalent of CSS3 `background-size: contain;` :

Equivalent of CSS3 `background-size: 100% 100%;` :

Linked

Related

How to stretch the background image to fill a div

10 Answers10

Modern CSS3 (recommended for the future & probably the best solution)

"Old" CSS "always working" way

Equivalent of CSS3 background-size: cover; :

Equivalent of CSS3 background-size: contain; :

Equivalent of CSS3 background-size: 100% 100%; :

Linked

Related

Equivalent of CSS3 `background-size: cover;` :

Equivalent of CSS3 `background-size: contain;` :

Equivalent of CSS3 `background-size: 100% 100%;` :