Home Section background on iPhone are not sizing correctly
Reply: 0

Section background on iPhone are not sizing correctly

user3825
1#
user3825 Published in May 26, 2018, 7:49 am

This question already has an answer here:

  • CSS background images resizing incorrectly on iPad and iPhone. 2 answers

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;
      }
    }
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.305807 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO