Foto's worden niet goed getoond mobiel
Ik gebruik voor de header een background image en deze style ik in de CSS op de volgende manier:
.header-image {
background-size: cover;
background-repeat: no-repeat;
height: 850px;
width: 100%;
background-position: 50%;
background-attachment: fixed;
}
En in de HTML:
<div class="header-image" style="background-image: url()"></div>
Als ik de header in Chrome test op een desktop met de iPhone 6/7/8 functie aan, krijg ik dit te zien:
En als ik hem test op een iPhone 6/7/8 krijg ik dit te zien:
Hoe krijg ik het opgelost dat hij op een iPhone 6/7/8 netjes wordt getoond, en niet een zwart vlak?
En waarom in-line styling?
Dit is de HTML:
Ik lees dat Safari op de iOS wel eens lastig kan/kon doen. Een van de gevonden oplossingen is het toevoegen van een background-color, die uiteraard door de background-url overruled wordt.
Gewijzigd op 03/12/2018 16:54:46 door - Ariën -
Toevoeging op 03/12/2018 17:17:14:
Julian Rouw op 03/12/2018 17:16:27:
Ik kwam erachter dat de foto op een mobile device wordt ingezoomd. Dus het zwarte vlak is van de bovenkant of de onderkant van de foto. Heb nu de size van cover veranderd in contain, maar nu wordt ie niet meer getoond!
Toevoeging op 04/12/2018 11:03:25:
Ik heb het werkend gekregen. Het probleem is background-attachment:fixed; Deze heb ik eraf gehaald en nu werkt ie op mobiel ook!