Background image not scaling on smaller screen size - html

Question

I am pretty new to this front-end stuff. I have an image 1200 * 900 px which i am using as a background for my banner. The image seems good on larger screens but when I switch to Apple iPhone 6S from responsive design mode. The background gets cutt off from sides. How do I retain complete image while still on smaller sizes.
index.html
<div class="container-fluid banner">
<div class="row">
<div class="col-md-8 content">
<h1>TThis is a banner image.</h1>
<p>Banner image is the main image we use on our web pages showing what your page is all about.</p>
</div><!--/.col-->
</div>
</div>
style.css
.banner {
background: url(banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 680px;
position: relative;
}
Some solutions i have tried say to set max-width: 100% on smaller screen size using media queries
#media (max-width: 768px) {
.banner{ max-width: 100%; }
}
But this solution doesn't work. What are my other options to scale this background with screen sizes ?

Answer 1

If you want to display the full picture you should use contain instead of cover.
And if you want to keep cover for larger screens you can change the cover to contain only in your queries.
#media (max-width: 768px) {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}