Foto's worden niet goed getoond mobiel

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Julian Rouw

Julian Rouw

03/12/2018 16:14:16
Quote Anchor link
Hallo,

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(
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php echo get_template_directory_uri().'/images/concert.jpg' ?>
)"></div>

Als ik de header in Chrome test op een desktop met de iPhone 6/7/8 functie aan, krijg ik dit te zien:
https://demo.wemovenederland.nl/mobile_chrome.PNG

En als ik hem test op een iPhone 6/7/8 krijg ik dit te zien:
https://demo.wemovenederland.nl/d543d744-66c7-49f1-b501-c27030cb1e4a.jpg

Hoe krijg ik het opgelost dat hij op een iPhone 6/7/8 netjes wordt getoond, en niet een zwart vlak?
 
PHP hulp

PHP hulp

17/12/2018 21:43:35
 
- Ariën -
Beheerder

- Ariën -

03/12/2018 16:22:46
Quote Anchor link
Hoe ziet de HTML-code in je browser eruit?
En waarom in-line styling?
 
Julian Rouw

Julian Rouw

03/12/2018 16:30:59
Quote Anchor link
Ik heb de in-line eruit gehaald, staat nu als background-image in css!

Dit is de HTML:
https://demo.wemovenederland.nl/html.PNG
 
- Ariën -
Beheerder

- Ariën -

03/12/2018 16:54:06
Quote Anchor link
En werkt het nu wel?
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 -
 
Julian Rouw

Julian Rouw

03/12/2018 17:16:27
Quote Anchor link
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 container, maar nu wordt ie niet meer getoond!

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!
 
- Ariën -
Beheerder

- Ariën -

03/12/2018 17:17:49
Quote Anchor link
Probeer mijn oplossing eens?
 
Julian Rouw

Julian Rouw

03/12/2018 18:54:58
Quote Anchor link
Ik heb een background-color toegevoegd maar er veranderd niks!

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!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.