TrippedStackers TrippedStackers - 2 years ago 130
HTML Question

Image Cut off using Background: Cover

I'm trying to get a background image to show the top part of the image under my current navigation. However I can't figure out what it is that I'm doing wrong here.


<section class="jumbotron">
<div class="container">


.jumbotron {
background: url("../img/bg.jpg") no-repeat bottom #b1b0b6;
padding: 10% 2%;
margin-top: 5%;
background-size: cover;
text-align: center;
color: white;
position: relative;
overflow: hidden;

With these current settings it shows this:

enter image description here

But the full image is this:
enter image description here

My live preview of it is here:

I've exhausted all options. Is this possible to fix?

Answer Source

If you want to show the top part of the image under navigation, Try adding this CSS:

    background-position-y: 0;

background-position-y property will sets the starting position of a background image on y-axis, I hope it helps you, Thanks.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download