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 938 · Accepted Answer · edited Sep 19 '22 at 14:25

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 or runnable snippet:

#imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}

<div id="imagecontainer"></div>

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

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

196

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

3,123
1
19
26

6

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
1

@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 34 · 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 15 · Answer 4 · answered Oct 29 '20 at 16:10

15

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

answered Oct 29 '20 at 16:10

Abhijeet1520

163
4
6

Welcome to stackoverflow! Please explain your answer to make it helpful. https://stackoverflow.com/help/how-to-answer https://stackoverflow.com/tour – ethry Oct 04 '22 at 02:00

score 10 · 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

Codemaker2015 · Answer 6 · 2022-10-04T04:49:45.057

try any of the following,

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

.container{
    background-size: 100%;
}

The background-size property specifies the size of the background images.

There are different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height).

percentage - Sets the width and height of the background image in percent of the parent element.
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible

For more: https://www.w3schools.com/cssref/css3_pr_background-size.asp

Welcome to stackoverflow! Please explain your answer to make it helpful. https://stackoverflow.com/help/how-to-answer https://stackoverflow.com/tour — ethry, Oct 04 '22 at 02:01

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

2

Alternative:

background-size: auto 100%;

answered May 26 '22 at 00:59

Marcel

2,810
2
26
46

Welcome to stackoverflow! Please explain your answer to make it helpful. https://stackoverflow.com/help/how-to-answer https://stackoverflow.com/tour – ethry Oct 04 '22 at 02:00

score 2 · Answer 8 · answered Oct 04 '22 at 01:02

2

you can also try this, set background size as cover and to get it look nicer also set background position center like so :

background-size: cover;
background-position: center ;

answered Oct 04 '22 at 01:02

Mostafa Ghorbani

397
1
3
15

Fit background image to div

8 Answers8

Linked

Related