Setting a divs background image to fit its size?

Question

I have a <div> with a background Image.

The <div> size may change over the time.

Is it possible setting the Divs Background image to fit the <div> size?

Lets say I have a div which is 400x400 and an Image which is 1000x1000, is it possible to shrink the image to 400x400 and therefore fit the <div> size?

score 64 · Accepted Answer · edited May 23 '17 at 12:34

64

If you'd like to use CSS3, you can do it pretty simply using background-size, like so:

background-size: 100%;

It is supported by all major browsers (including IE9+). If you'd like to get it working in IE8 and before, check out the answers to this question.

edited May 23 '17 at 12:34

Community

1
1

answered Mar 09 '13 at 16:40

dsgriffin

66,495
17
137
137

any way to do it in css 2.1? – kfirba Mar 09 '13 at 16:42
@kfirba I believe IE9+ supports background-size, and I'm sure there are work-arounds to get it working in IE8 and before if you need it :) – dsgriffin Mar 09 '13 at 16:48

score 26 · Answer 2 · answered Mar 09 '13 at 16:41

26

Use background-size for that purpose:

background-size: 100% 100%;

More on:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

answered Mar 09 '13 at 16:41

score 17 · Answer 3 · answered Mar 09 '13 at 16:41

17

Use background-size property to achieve that. You should choose between cover, contain and 100% - depending on what exactly you'd like to get.

answered Mar 09 '13 at 16:41

MarcinJuraszek

124,003
15
196
263

Works perfectly – Nabeel Dec 04 '17 at 16:58
cover and contain were the things I didn't know, thank you for being more detailed than the accepted answer. – CJT3 Feb 23 '21 at 00:51

score 7 · Answer 4 · answered Apr 07 '15 at 10:14

You can achieve this with the background-size property, which is now supported by most browsers.

To scale the background image to fit inside the div:

background-size: contain;

To scale the background image to cover the whole div:

background-size: cover;

score 2 · Answer 5 · answered Jul 15 '14 at 18:10

2

Use this as it can also act as responsive. :

background-size: cover;

answered Jul 15 '14 at 18:10

Sankalp Singha

4,461
5
39
58

score 1 · Answer 6 · answered Apr 07 '15 at 10:27

1

You could use the CSS3 background-size property for this.

.header .logo {
background-size: 100%;
}

answered Apr 07 '15 at 10:27

Haresh Shyara

1,826
10
13

score 0 · Answer 7 · answered Mar 09 '13 at 16:42

0

Set your css to this

img {
    max-width:100%,
    max-height100%
}

answered Mar 09 '13 at 16:42

miguel.gazela

143
2
14

that's exactly the problem, I don't want to use an image I want to use a Div with BG image – kfirba Mar 09 '13 at 16:43
Ok, I thought you were using an image inside the div. You should use the background-size property then. – miguel.gazela Mar 09 '13 at 16:45

score 0 · Answer 8 · answered Mar 14 '14 at 04:28

0

Wanted to add a solution for IE8 and below (as low as IE5.5 I think), which cannot use background-size

div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}

answered Mar 14 '14 at 04:28

chiliNUT

18,989
14
66
106

score 0 · Answer 9 · answered Mar 20 '22 at 09:04

0

This should work but will not keep the image aspect ratio:

 background-size: 100% 100%;

answered Mar 20 '22 at 09:04

Sharhabeel Hamdan

1,273
13
15

Setting a divs background image to fit its size?

9 Answers9