Section background on iPhone are not sizing correctly

Question

I have been trying for many hours to properly size the background on iPhones for a section using either a fixed or scroll attachment to the section tag, but I have not been able to get any of the common fixes to work. No matter what I've tried the background images for iPhones continue to be blown out of proportion.

I have tried to include 'user-scalable=no' in the meta tag. I tried including the section in a div whose height and width were 100%. I tried to force the sizing using jQuery. I tried add a media query for iPhones to set background-attachment to "initial".

I still do not understand how the fixes I attempted to implemented should have worked in theory, but it seems that the problem may be with my css or html instead to me now that so many supposed fixes are not working.

This is a definite setback as far as my desire to become a web designer goes. Thanks.

   <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

     <section id="congress-section" class="py-4">
       <div class="container">
         <div class="row py-3">
           <div class="col-md-6 mb-3">
             <div class="card card-outline-secondary">
               <div class="card-block">
                 <h3 class="text-center">Wednesday Pre-Party (optional)</h3>
                 <p class="lead">Day 0</p>
                 <hr>
                 <p><i class="fa fa-check"></i>Early Check-In & Registration</p>
                 <p><i class="fa fa-camera-retro"></i>Tour Around Bologna</p>
                 <p><i class="fa fa-glass"></i>Party alla bolognese</p>
               </div>
             </div>
           </div>
           <div class="col-md-6 mb-3">
             <div class="card card-outline-secondary">
               <div class="card-block">
                 <h3 class="text-center">Thursday: 9 - 17</h3>
                 <p class="lead">Day 1</p>
                 <hr>
                 <p><i class="fa fa-check"></i>Registration</p>
                 <p><i class="fa fa-quote-left"></i>Keynote</p>
                 <p><i class="fa fa-cutlery"></i>Lunch & Coffee Time Gratis</p>
                 <div class="col-11 offset-1 subicon">
                   <p><i class="fa fa-leaf"></i>Vegan Options</p>
                 </div>
                 <p><i class="fa fa-users"></i>Share Experience & Give Feedback in Alternative Groups</p>
                 <p><i class="fa fa-beer"></i>A Pizza in Piazza Party (Night)</p>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </section>



  #congress-section {
      background: url(../img/police2_2.jpg);
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: $color3;
    }

    @media (max-width: 767px) {
      #congress-section {
        background-attachment: initial;
      }
    }

I had already tried this response with no avail, but I found the problem with my scss compiling rather than all the solutions I had previously tried. Each of which now works. Thanks! — Jacob McCarthy, Nov 15 '17 at 13:17

score 0 · Accepted Answer · answered Nov 15 '17 at 06:48

Here is the working solution for your question

<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

     <section id="congress-section" class="py-4">
       <div class="container">
         <div class="row py-3">
           <div class="col-md-6 mb-3">
             <div class="card card-outline-secondary">
               <div class="card-block">
                 <h3 class="text-center">Wednesday Pre-Party (optional)</h3>
                 <p class="lead">Day 0</p>
                 <hr>
                 <p><i class="fa fa-check"></i>Early Check-In & Registration</p>
                 <p><i class="fa fa-camera-retro"></i>Tour Around Bologna</p>
                 <p><i class="fa fa-glass"></i>Party alla bolognese</p>
               </div>
             </div>
           </div>
           <div class="col-md-6 mb-3">
             <div class="card card-outline-secondary">
               <div class="card-block">
                 <h3 class="text-center">Thursday: 9 - 17</h3>
                 <p class="lead">Day 1</p>
                 <hr>
                 <p><i class="fa fa-check"></i>Registration</p>
                 <p><i class="fa fa-quote-left"></i>Keynote</p>
                 <p><i class="fa fa-cutlery"></i>Lunch & Coffee Time Gratis</p>
                 <div class="col-11 offset-1 subicon">
                   <p><i class="fa fa-leaf"></i>Vegan Options</p>
                 </div>
                 <p><i class="fa fa-users"></i>Share Experience & Give Feedback in Alternative Groups</p>
                 <p><i class="fa fa-beer"></i>A Pizza in Piazza Party (Night)</p>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </section>



  #congress-section {
      display: inline-block;
      width:100%;
      background: url(../img/police2_2.jpg);
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: $color3;
    }

    @media (max-width: 767px) {
      #congress-section {
        background-size: cover;
      }
    }

Let me know if you need further help.

This solution does work, but it didn't work for my project which led me to reevaluate every step in my workflow. After a few hours I found the issue within my sass compiling. Thank you for your help! — Jacob McCarthy, Nov 15 '17 at 13:18

Section background on iPhone are not sizing correctly

1 Answers1