achtergrond afbeelding schaalt niet mee op mobiel

Status
Niet open voor verdere reacties.

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
Ik ben bezig met deze website: http://met-rob.com/beneluxevents/

Op de homepage staat halverwege een tekst die over een achtergrond (een paars gekleurde google maps afbeelding) heengaat.

Als ik echter op mijn mobiel kijk (zie bijlage) zie ik alleen de linkerkant van deze afbeelding. (ik zie alleen "zierikzee")

Weet iemand hoe ik de afbeelding mee kan laten schalen zodat je meer van die achtergrondafbeelding ziet?
 

Bijlagen

  • IMG_7948.PNG
    IMG_7948.PNG
    435,1 KB · Weergaven: 63
Ikzelf zie hem niet zover ingezoomd op Chrome op mijn smartphone.
 
Ik zie op de iPad een ander deel van de kaart als op de telefoon (iPad begint waar telefoon ophoudt), maar is dat erg dan? Je kunt daar toch niks mee. Je hebt sowieso een andere lay-out op de telefoon...
 
De bedoeling van die kaart is om mensen een idee te geven in welk gebied zij werkzaam zijn. Het is geen noodzakelijk iets maar het zou fijner zijn als de achtergrondafbeelding meer zou laten zien dan hij nu doet op een telefoon. Als ik hem op mij iphone 6 bekijk zie ik alleen zierikzee
 
Ik zit nu ook op mijn telefoon en ik kan ook niet je broncode zien. Dus kan je de relevante code hier even plaatsen? Dan hebben andere hier soortgelijk probleem hebben er ook nog wat aan ;).
 
Hier zit nu net het probleem.

De instelling zit volgens mij ergens in “style.css” of “bootstrap-min.css”

Maar ik heb deze al afgespeurd en kan nergens iets vinden wat hier betrekking op heeft.
 
Ik denk dat het ergens hier moet zitten:

Het achtergrondplaatje met de google maps afbeelding heet "ser.jpg"

/*-- //about--*/
.w3layouts-clients h3 {
text-align: center;
font-size: 32px;
color: #BBBBBB;
font-weight: 600;
margin-bottom: 30px;
letter-spacing: 4px;
text-transform: uppercase;
}
.w3layouts-clients h3 span {
color: #fff;
}
.w3layouts-clients p {
font-size: 15px;
color: #fff;
text-align: center;
line-height: 28px;
width: 72%;
margin: 0 auto;
}
.w3layouts-clients {
background: url(../images/ser.jpg) no-repeat 0px 0px;
padding: 100px 0;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-attachment: fixed;
}
 
Hoi Rob,

Volgens mij zie ik het op mijn Android (Pie) mobiel met Chrome wel correct, zie bijlage? Of had jij nog wat anders verwacht?

Groeten,

Arie
 

Bijlagen

  • Screenshot_20190606_165012_com.android.chrome.jpg
    Screenshot_20190606_165012_com.android.chrome.jpg
    643,1 KB · Weergaven: 57
Nee, zo hoort hij te zijn. Maar bij mij op mijn iphone is het anders (zie originele screenshot die ik had bijgevoegd). Zou het dan een "iphone probleem" kunnen zijn?

Ik heb hem net bekeken in safari én in chrome op mijn iphone.

Bij beiden zie ik alleen zierikzee heel groot staan
 
Laatst bewerkt:
Heb hem net ook even bekeken in de browser “Puffin” op mijn iPhone.

En ja hoor... daar staat hij wel goed.

Vreemd verhaal
 
Heb je wel iets aangepast aan je css? Want dan zou het kunnen zijn dat je mobiel nog de oude (cache) css file inlaad, op een mobiel is het lastig om een harde refresh te geven zoals op een PC met Ctrl + F5.

Wat je evt. even zou kunnen proberen is om je pagina via een incognitoblad te openen, dan wordt er namelijk nooit vanuit je cache geopend en wordt alles vanaf de webserver geladen, misschien gaat het dan wel goed?
 
De cover van het achtergrondplaatje werkt als je background-attachment: fixed weghaalt.
En met center center werkt het denk ik nog iets netter.
De kleur toegevoegd als fallback in het geval het plaatje om een reden is verdwenen
Veranderen in style.css:
Code:
.w3layouts-clients {
  background: [B]#8b5b8d[/B] url('../images/ser.jpg') no-repeat [B]center center[/B];
  padding: 100px 0;
  -webkit-background-size: cover;
     -moz-background-size: cover;
      -ms-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  [B]/* [/B]background-attachment: fixed;[B] */[/B]
}

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan