Background issue on Iphone | Community
Skip to main content

Background issue on Iphone

  • May 22, 2024
  • 2 replies
  • 0 views
L

I'm remodeling the help center, but I'm encountering a difficulty with the iPhone-only homepage background. On Android and desktop everything works correctly, but on iPhone the image is stretched. Since the property background-attachment: fixed; Doesn't work on iPhone. But how can I get it to work correctly on all iPhones?

 

CSS Code

.bg-community {
  background-image: url($community_background_image);
}

.bg-home {
  background-image: url($homepage_background_image);
	
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
	
    }

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-min-device-pixel-ratio: 3) {
   
  
  
  .bg-home {
        
      background-image: url(($homepage_background_image);
   		Position:fixed;
 			background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  
    }
}

    2 replies

    B
    • brandon50
    • May 29, 2024

    Hello,

    To ensure the homepage background works correctly on iPhones, you need to address the fact that background-attachment: fixed; is not supported on iOS. Instead, you can use a workaround involving a combination of CSS and media queries. Here’s a solution that should help: Use Media Queries for iOS Devices: Apply specific jetnet aa styles for iPhones using media queries to adjust the background properties. Background Image Workaround: Use a different approach to achieve a similar effect as background-attachment: fixed;.

    L
    • lpires
    • Author
    • February 7, 2026

    SOLUTION:

     

    @media (max-width: 768px) {
     /* 1. Removemos a imagem do bloco principal para ela não esticar com o texto */
     .bg-home {
         background-image: none !important;
         position: relative;
         z-index: 0;
     }

     /* 2. Criamos uma "folha" fixa atrás do site só com a imagem */
     .bg-home::before {
         content: "";
         position: fixed; /* O segredo: o elemento é que é fixo, não a imagem */
         top: 0;
         left: 0;
         width: 100%;
         height: 100vh; /* Ocupa 100% da altura do ECRÃ, não do texto */
         z-index: -1; /* Garante que fica atrás do texto */
         
         background-image: url($assets-bk16_mobile-jpg);
         background-size: cover;
         background-position: center center;
         background-repeat: no-repeat;
         pointer-events: none; /* Para não interferir com cliques */
     }
    }

    Terms & ConditionsCookie settingsAccessibility statement