Fit background image to div

Question

I have a background image in the following div, but the image gets cut off:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

Is there a way to show the background image without cutting it off?

background-image:url(/media/img_1_bg.jpg); background-size: contain; background-repeat:no-repeat; — Waruna Manjula, May 18 '18 at 16:39

score 870 · Accepted Answer · edited May 23 '17 at 12:02

870

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;

JSFiddle example

There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.

edited May 23 '17 at 12:02

Community

1
1

answered Nov 20 '11 at 08:14

grc

21,645
4
39
63

Sertage · Answer 2 · 2018-06-21T08:42:14.430

170

If what you need is the image to have the same dimensions of the div, I think this is the most elegant solution:

background-size: 100% 100%;

If not, the answer by @grc is the most appropriated one.

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

edited Jun 21 '18 at 08:42

answered Aug 14 '15 at 14:25

Sertage

2,795
1
17
23

5

but this would stretch the image... is there a way to fit the background image without stretching it? – Junaid Feb 09 '18 at 12:52
1

Aspect ratio lost however. – Learner Jan 07 '19 at 10:38
@Learner If you change the dimensions of a image without cropping the image the aspect ratio will be lost 99% of the time. It's common sense. – Vaibhav Vishal Apr 11 '19 at 11:11

score 26 · Answer 3 · answered Nov 13 '18 at 05:05

You can use this attributes:

background-size: contain;
background-repeat: no-repeat;

and you code is then like this:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

score 11 · Answer 4 · answered Oct 29 '20 at 16:10

11

background-position-x: center;
background-position-y: center;

answered Oct 29 '20 at 16:10

Abhijeet1520

113
4
6

score 9 · Answer 5 · answered Mar 24 '15 at 15:58

you also use this:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;

I don't know your div-values, but let's assume you've got those.

height: auto;
max-width: 600px;

Again, those are just random numbers. It could quite hard to make the background-image (if you would want to) with a fixed width for the div, so better use max-width. And actually it isn't complicated to fill a div with an background-image, just make sure you style the parent element the right way, so the image has a place it can go into.

Chris

Link to a highly voted answer that talks about this solution in more detail: https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size and shows you how to calculate the `padding-top`. — John Lee, May 01 '19 at 16:57

score 2 · Answer 6 · answered Sep 03 '20 at 14:19

2

try any of the following,

background-size: contain;
background-size: cover;
background-size: 100%;

.container{
    background-size: 100%;
}

answered Sep 03 '20 at 14:19

Codemaker

7,952
3
61
53

score 0 · Answer 7 · answered May 26 '22 at 00:59

0

Alternative:

background-size: auto 100%;

answered May 26 '22 at 00:59

Marcel

2,512
2
21
39

Fit background image to div

7 Answers7

Linked

Related