22

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>

3
  • What do you mean by "centered" content?
    – Turi S.
    Sep 18, 2016 at 16:01
  • 1
    Use background-size: contain instead.
    – kinakuta
    Sep 18, 2016 at 16:07
  • This is relelvant: stackoverflow.com/questions/21786272/… with background-attachment: fixed image is sized relative to viewport, not containing element.
    – Turi S.
    Sep 18, 2016 at 16:14

6 Answers 6

48

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;
}
5

you should use:

.container{
    background-size: 100%;
}
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/

1
.container{
    background-size: contain;
}
0

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

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

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

background-size: 100% 100%;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.