CSS background image - shrink to fit fixed size div - css

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>

Answer 1

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

Answer 2

you should use:
.container{
background-size: 100%;
}

Answer 3

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/

Answer 4

.container{
background-size: contain;
}

Answer 5

I solved this way. You can set your code like this:
<div style="background-image: url('your_url') ;background-size: 100% 100%; "> <div>

Answer 6

This trick should work but it will not keep the image aspect ratio by default.
background-size: 100% 100%;