Foto's worden niet goed getoond mobiel

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior PHP Developer Onderwijssoftware SaaS oploss

Senior PHP Developer Onderwijssoftware SaaS oplossing Wat ga je doen als Senior PHP developer? Als Senior PHP Developer uit de omgeving Amsterdam, ga jij werken aan onderwijs-software pakketten voor basis- en het voorgezet onderwijs, en voor volwasseneducatie. Het pakket voor basisonderwijs is een overzichtelijke communicatie tool (Laravel) voor leerkrachten. Met de tool kunnen zij ouders en verzorgers meer betrekken bij de vooruitgang van het kind. Denk hierbij aan nieuwsbrieven, oudergesprekken inplannen, persoonlijke berichten en absentie registratie. De overige pakketten (Symfony) worden aangeboden als een SAAS-online leerplatform. Het geeft leerkrachten de mogelijkheden om extra lesmaterialen van uitgevers om op maat onderwijs

Bekijk vacature »

Medior PHP Developer Energy Services Symfony

Medior PHP Developer Energy Services Symfony Wat ga je doen als Medior PHP Developer? Als Medior PHP Developer uit de omgeving Rotterdam, ga jij werken aan een real-time energievoorziening webportal voor in de agrarische sector. De webportal ontzorgt klanten 24/7 volautomatische aansturing van warmtekrachtkoppeling, warmtepompen en netinkoop. Dit op basis van actuele APX in-en verkoopverplichtingen en onbalansmarktprijzen. Deze webportal levert 5 minuten near-time (bron) meetdata, automatisch ingelezen marktprijzen gas en elektriciteit en doorlopend near-time (op kwartierbasis) geactualiseerde financiële en technische performance rapportages (waaronder rookgasreiniging raakgascondensor monitoring). Hiermee bied jij een "energiedashboard" met alle relevante parameters om optimale economische en technische

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

22/02/2019 14:37:27
 
- 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.