I'm just starting to learn about front-end development. I have an image that is 1200 * 900 px which I am using as a banner background. It looks great on larger screens, but when I view it on an Apple iPhone 6S or other smaller devices, the sides of the image get cut off. How can I ensure the entire image is displayed even on smaller screens?
index.html
<div class="container-fluid banner">
<div class="row">
<div class="col-md-8 content">
<h1>This is a banner image.</h1>
<p>A banner image is the main image used on web pages to showcase what the 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;
}
I've tried setting max-width: 100% for smaller screen sizes using media queries, but it hasn't worked.
@media (max-width: 768px) {
.banner{ max-width: 100%; }
}
What are my other options for scaling this background image with different screen sizes?