Background images not resizing on mobile/iPhone

Question

I have a page with large images that parallax scrolls.

HTML:

<section class="parallax-top">
    <div class="caption">
    <h1><img src="../images/mainlogo.png" alt="Culture Smart!"></h1>
    <h2>Culture Smart! guides begin where other travel books end.</h2>
    <p>Our guides emphasize the people, not places. Written for the inquisitive traveler who wants more than information on hotels and sightseeing, they offer an insight into the rich human dimension of travel. Navigate your way abroad with over 100 country guides.</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>About Culture Smart!</h2>
            <h4>The Essential Guide to Customs &amp; Culture</h4>
            <p>Culture Smart! provides essential information on attitudes, beliefs and behaviour in over 100 different countries.</p>
            <p><a class="btn btn-primary btn-lg" href="whatiscs.php" role="button">Learn more</a></p>
        </span>
</section>

<section class="parallax-middle">
    <div class="caption-middle">
        <span class="border-middle">
            <h2>News &amp; Promotions</h2>
            <h4>Find out what is going on around the world</h4>
            <p><a class="btn btn-primary btn-lg" href="news.php" role="button">Latest</a></p>
        </span>
    </div>
</section>

<section class="box">
    <span class="border">
            <h2>Our Authors</h2>
            <p>Find out their stories and experiences and how they can help enrich your travels.</p>
            <p><a class="btn btn-primary btn-lg" href="authors.php" role="button">About them</a></p>
        </span>
</section>

<section class="parallax-bottom">
    <div class="caption-bottom">
        <span class="border-bottom">
            <h2>We would love to hear from you</h2>
            <h4>Idea for the next book, let us know what you think of Culture Smart.</h4>
            <p><a class="btn btn-primary btn-lg" href="contact.php" role="button">Get in touch</a></p>
        </span>
    </div>
</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;
  overflow: hidden;
}

.main .caption {  
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
    background-color: black;
    opacity: 0.75;
    height: auto;
    padding: 0;
}

.main .caption h1 {
  margin-top: 0px;
}

.main .caption p {
  width: 80%;
  margin: auto;
  margin-bottom: 10px;
}


.parallax-middle {
  background-image: url("../images/hero1.jpg"); 
  height: 1200px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.caption-middle {  
    position: relative;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
    background-color: black;
    opacity: 0.75;
    height: auto;
    padding: 1%;
}

.parallax-bottom {
  background-image: url("../images/hero2.jpg"); 
  height: 1200px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.caption-bottom {  
    position: relative;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
     background-color: black;
    opacity: 0.75;
    padding: 1%;
    height: auto;
}

When this is displayed on mobile the images are zoomed right in so I cannot see what they are. Changing to "background-attachment: scroll;" solved the problem but I lose the parallax effect on a computer. Is there a way auto resize background images on mobile? I do not mind losing the parallax effect on mobile

Answer 1

The height on your div is probably the problem, have you tried adjusting that for mobile with a media query or maybe background-size:contain on mobile?