I'm currently in the process of enhancing my website by incorporating background images using the background property. My goal is to ensure that each image fills the width and height of its container without sacrificing quality or aspect ratio. Here is what I have achieved so far.
Index.html
<!--Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Brand Image</a>
</div><!-- ./navbar-header -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!--/.navbar End Of Nav Bar-->
...
... (rest of the HTML code)
...
main.css
/*Styles The Sections Home, About, Portfolio, Contact */
.main-section{
padding: 10%;
min-height: 850px;
text-align : center;
vertical-align : middle;
}
...
... (additional CSS styles)
...
I am satisfied with the current functionality of the site on desktop, however, I've noticed that the background images become more pixelated when viewed on mobile devices, especially as I add more sections to the site.
https://i.sstatic.net/re1YJ.png
Interestingly, by removing the about section, the image quality returns to what I originally intended.
https://i.sstatic.net/D0OeP.png
What steps can I take to prevent the background image from becoming pixelated as I expand the site with additional sections?
Here's the link to the codepen where I have been working on this:http://codepen.io/dfann/pen/yeYRKP