Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Opgelost Background image zelfde opbouw op Ipad 1 maal veel te groot andere juist van formaat

Ik probeer een website te maken waarbij ik gebruik maak van 2 background-images en wanneer hij op iPad wordt weergegeven heb ik het probleem dat de eerste background-image buitenpropotioneel groot is waar de 2e correct wordt weergegeven. Op android telefoon en de responsive weergave van Firefox is er niets aan de hand en wordt alles juist weergegeven De html ziet er als volgt uit, voor de afbeelding die foutief wordt weergegeven:


<div id="cd-placeholder-1" class="cd-fixed-bg cd-bg-1" data-stellar-background-ratio="0.4" data-stellar-horizontal-offset="50" data-stellar-vertical-offset="950">
<div class="logo" style="display:none">
<img src="img/classic_car_eigen4.svg" alt="logo Mark Geessink classic-cars" onerror="this.src='img/Classic-cars-eigen.png'; this.onerror=null;"/>
</div>
<div class="slogan" style="display:none">
<img src="img/mark_geessink_classic_cars.svg" alt="text Mark Geessink classic-cars" onerror="this.src='img/mark_geessink_classic_cars.png'; this.onerror=null;"/>
</div>
<div class="scroll_down" style="display:none">
<div class="wrapper">
<div class="col">
<button class="scroll">
<span class="instruct"></span>
</button>
</div>
</div>
</div>
</div>

voor de afbeelding die juist wordt weergegeven:


<div class="cd-fixed-bg cd-bg-4">
<div id="footer_logo">
<img src="img/divider_eigen2.svg">
</div>
</div>

De css is in beide gevallen gelijk:


.cd-fixed-bg {
position: relative;
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center !important;
z-index: 1;
}

Ik heb bij de bovenste foto alles weggelaten wat anders is dan bij de onderste foto, maar zonder resultaat. Verder heb ik toegevoegd:


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0???/>
en


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio:1) {
.cd-fixed-bg {
position: relative;
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center !important;
z-index: 1;
}

.cd-fixed-bg.cd-bg-1 {
background-image: url("./img/cd-background-10-landscape.jpg");
background-attachment: fixed;
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio:1) {
.cd-fixed-bg {
position: relative;
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center !important;
z-index: 1;
}

.cd-fixed-bg.cd-bg-1 {
background-image: url("./img/cd-background-10-portrait.jpg");
background-attachment: fixed;
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:1) {
.cd-fixed-bg {
position: relative;
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center !important;
z-index: 1;
}

.cd-fixed-bg.cd-bg-1 {
background-image: url("./img/cd-background-10-landscape.jpg");
background-attachment: fixed;
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio:2) {
.cd-fixed-bg {
position: relative;
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center !important;
z-index: 1;
}

.cd-fixed-bg.cd-bg-1 {
background-image: url("./img/cd-background-10-landscape.jpg");
background-attachment: fixed;
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio:2) {
.cd-fixed-bg {
position: relative;
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center !important;
z-index: 1;
}

.cd-fixed-bg.cd-bg-1 {
background-image: url("./img/cd-background-10-portrait.jpg");
background-attachment: fixed;
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
.cd-fixed-bg {
position: relative;
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center !important;
z-index: 1;
}

.cd-fixed-bg.cd-bg-1 {
background-image: url("./img/cd-background-10-landscape.jpg");
background-attachment: fixed;
}
}


waarbij ik ook kleinere afbeeldingen heb toegevoegd om te kijken of dit verbetering zou geven, maar helaas, ook dit gaf niet het beoogde resultaat.

De site is te vinden op: http://markgeessink-classiccars.com/test/

Kan iemand mij zeggen wat ik fout doe.

Dank voor de moeite.
Getagd:

Reacties

  • Ik heb het probleem gevonden. Door dit toe te voegen: background-attachment: fixed; aan de betreffende afbeelding ( dit is nodig voor het gebruik van stellar.js ) gaat de afbeelding zich dus vreemd gedragen op de iPad.

    Dank voor de moeite
  • PMPosts: 879
    Oke. Interressant. Ik was al aan het kijken of het met compatibiliteit van .svg bestanden te maken had. Ik las dat de Ipad daar ook niet altijd juist mee omging
  • PMPosts: 732
    Snap je css niet goed omtrent resoluties?
    Betreft het nu twee afbeeldingen, of meerdere afbeeldingen omtrent grote voor resoluties?

    Kijk ook eens naar srcgroup ook handig ;)
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.