Currently, I am in the process of working on a project that utilizes bootstrap 3.3.7. The front page features a prominent background image.
The image appears perfectly on my computer screen like this: https://i.sstatic.net/faDRw.png.
However, when I try to Zoom In on the image, it ends up cutting off from the top and bottom like so:
https://i.sstatic.net/MHptc.png
The HTML code snippet responsible for displaying the content is as follows:
<div class="bg-img">
<div class="container" style="color:#fff;padding: 56px 0 85px 0px">
<h1 class="container" style="font-size:51px;font-weight:600;margin-bottom:30px;">Work Different</h1>
<div class="row container" style="margin-bottom:12px;">
<p class="col-md-3" style="width:29%">Provide your organization a powerful work execution platform that offers exceptional speed to business value — so you say yes to more ideas, more customers, and more revenue.</p>
<p class="col-md-9"></p>
</div>
<br>
<br>
<div class="container"><a class="btn nav-btn-green" href="/SignUp">Try Risk Hippie for Free</a></div>
</div>
</div>
The CSS style applied to my background image is as follows:
.bg-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url(/img/newbackground.png);
margin-top:-9px;
-webkit-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), inset 567px 0 170px -25px rgba(0, 0, 0, 0.45);
-moz-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), inset 567px 0 170px -25px rgba(0, 0, 0, 0.45);
box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), inset 567px 0 170px -25px rgba(0, 0, 0, 0.45);
}
Unfortunately, I have encountered an issue where the image does not respond well when I attempt to zoom in using my browser.