L. Wu L. Wu - 1 year ago 56
CSS Question

Making an image stay within a div in the same location

this is my site currently:

I want to make the bouncing arrow stay in that exact same location depending on the viewers computer size screen but I cannot figure it out. I tried many things like styling the position but still ends up out of the div.

<div class="jumbotron" id="home">
<h1>HELLO!<h1 style="font-family: ProximaNovaSemibold;">MY NAME IS</h1></h1>
<a class="smoothScroll" href="#work"> <img id="angleDown" style="margin-top:15%;" width="60px" height="60px" alt="" src="img/angle-down.png" /></a>

This is the style I am using for the div

#home {
background: url('img/img-home.jpg') no-repeat center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
text-align: center;
padding-top: 13.4%;

Any help would be appreciated! Thank you.

Answer Source
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -30px;

Thus always be at the bottom of the image, is what you want?

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