Foto's worden niet goed getoond mobiel

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Web Ontwikkelaar PHP, Nijmegen

Contactpersoon Roel Kavelaar rkavelaarATsearch-consult.nl 0243528815 0644949337 Organisatie Jong, gezond en sterk groeiende bedrijf dat webbased multimedia oplossingen bouwt in de omgeving Nijmegen. Het bedrijf bouwt voor klanten o.a. geavanceerde websites, webwinkels, webapplicaties en specifieke webbased software. Het bedrijf ontwikkelt en onderhoudt ook verschillende bekende Nederlandse websites. Op dit moment hebben zij een groeiende en brede klantenkring opgebouwd. Met betrekking tot programmeer-, onderhoud-, ontwerp-werkzaamheden wordt een PHP ontwikkelaar gezocht met kennis van contentmanagementsysteemen en frameworks. Locatie Nijmegen Verantwoordelijkheden (Her)Ontwerpen en (her)ontwikkelen in PHP ten behoeve van websites voor klanten, project klussen, onderhoud en specifieke klantwensen (Her)Ontwerpen en (her)ontwikkelen in PHP, PHP

Bekijk vacature »

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

21/05/2019 01:46:16
Honeypot
 
- 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.