Fluid images and parallax scolling -
i having problems getting website mobile optimised. realise parallax scrolling disabled, have done.
however, when site displayed on mobile want keep resolution of background image same. have tried several ways either image far zoomed on mobile, or if scales there huge gap between 2 divs:
html:
<section class="parallax-top"> <div class="caption"> <img src="../images/mainlogo.png" alt="logo"> <h2>text</h2> <p>gshghjhdskjfhkh fglkjslkjj fll fl</p> <p><a class="btn btn-primary btn-lg" href="destinations.php" role="button">full list</a></p> </div> </section> <section class="box"> <span class="border"> <h2>text2</h2> <h3>heading</h3> <h4>jkjfhkjfhafa</h4> <p><a class="btn btn-primary btn-lg" href="whatiscs.php" role="button">learn more</a></p> </span> </section>
css:
parallax-top { background-image: url("../images/hero3.jpg"); height: 1200px; background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-size: cover; } .main .caption { position: relative; left: 0; top: 35%; width: 100%; text-align: center; color: white; background-color: black; opacity: 0.75; height: auto; padding: 0.5%; } .main .caption p { width: 80%; margin: auto; margin-bottom: 10px; } .box { height: auto; !important; margin-top: auto; text-align: center; padding: 50px; } @media screen , (max-width: 992px) { .parallax-top { background-attachment: scroll; background-size: cover; }
any suggestions?
Comments
Post a Comment