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:

codepen

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

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -