TrippedStackers TrippedStackers - 7 months ago 19
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.

HTML:

<section class="jumbotron">
<div class="container">
<br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
</div>
</section>


CSS:

.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:

http://podpanel.pw/

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

Answer

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

.jumbotron{
    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.

Comments