CSS background image - shrink to fit fixed size div

Question

I have the following code at https://jsfiddle.net/ncrcfduz, and a background image at https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg. I need to make the background image rescale to fit in the div, preferred to show most of the "centered" content in the image. The following code only show the top-left corner of the image.

.container {
  background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 150px;
  width: 300px;
}

<div class="container">
</div>

This is relelvant: http://stackoverflow.com/questions/21786272/css-background-size-cover-background-attachment-fixed-clipping-background-im with `background-attachment: fixed` image is sized relative to viewport, not containing element. — Turi S., Sep 18 '16 at 16:14

henry · Accepted Answer · 2018-08-09T17:16:35.217

You're looking for background-size: contain (see the MDN entry), not cover. To get your example to work, you'll have to drop the background-attachment: fixed. Use background-position: center to center the background in your div.

.container{
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 150px;
    width: 300px;
}

<div class="container">
</div>

Notes:

These days you almost certainly don't need the browser prefixes, meaning you can just use background-size: contain. See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility
If you're using Autoprefixer (included in many build tools and build setups) it will automatically add any necessary prefixed versions for you, meaning you could do background-size: contain even if current versions of the major browsers still required prefixes.
You can include size in the background shorthand property with the syntax background: <background-position>/<background-size>. That would look like

.container{
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center/contain;

    height: 150px;
    width: 300px;
}

score 5 · Answer 2 · answered Sep 18 '16 at 16:06

5

you should use:

.container{
    background-size: 100%;
}

answered Sep 18 '16 at 16:06

Anonoymous

132
1
6

score 1 · Answer 3 · answered Sep 18 '16 at 16:06

1

You just have to replace "fixed" by "center" on your "background" instruction.

Like that:

background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;

JSFiddle here: https://jsfiddle.net/ncrcfduz/2/

answered Sep 18 '16 at 16:06

AymericM

101
4

score 1 · Answer 4 · answered Sep 03 '20 at 14:17

1

.container{
    background-size: contain;
}

answered Sep 03 '20 at 14:17

Codemaker2015

12,190
6
97
81

Yavuz Yoldaş · Answer 5 · 2021-01-16T14:25:21.427

0

I solved this way. You can set your code like this:

<div style="background-image: url('your_url') ;background-size: 100% 100%; "> <div>

edited Jan 16 '21 at 14:25

answered Jan 16 '21 at 14:18

Yavuz Yoldaş

841
1
9
19

score 0 · Answer 6 · answered Mar 20 '22 at 09:03

0

This trick should work but it will not keep the image aspect ratio by default.

background-size: 100% 100%;

answered Mar 20 '22 at 09:03

Sharhabeel Hamdan

1,273
13
15

CSS background image - shrink to fit fixed size div

6 Answers6

Notes: