PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Full page background image

Door Jos Verstraeten op 09-07-2014 17:43
1.644 views
Ik heb nu op mijn website verschillende background images die mee scalen wanneer je de browser resized. 


  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


Maar de afbeeldingen die ik gebruik zijn heel groot genomen qua resolutie, misschien zelfs iets te groot. Welke resolutie is het beste om zo een background image te gebruiken?

Ik heb afbeeldingen van 3000 x 2000 maar deze laden bij mij zelfs niet direct bij het openen van de pagina dus mensen met trager internet gaat het nog trager gaan.

Als ik dan te klein ga worden ze uitgetrokken en merk je bijna niets meer van de afbeelding ...

Wat zijn jullie tips hieromtrent ?
Eddy E
09-07-2014 20:53
Kijk eens naar responsive web design (RWD).

Je kan bij resoluties lager dan 600 pixels een 600 pixels-plaatje geven.
Bij resoluties lager dan 1000 (maar meer dan 600) geef je een 1000 pixels plaatje.
Bij resoluties lager dan 1500 (maar meer dan 1000) geef je een 1500 pixels plaatje.
Bij resoluties lager dan 2000 (maar meer dan 1500) geef je een 2000 pixels plaatje.
Bij resoluties lager dan 1500 (maar meer dan 2000) geef je een 2500 pixels plaatje.

Frank Nietbelangrijk
09-07-2014 21:29
Ongeveer zoiets dacht ik?

css:

media screen and (max-width:600px) {
	body { 
		background-image: url('image/bg_600px.jpg'); 
	}
}
media screen and (max-width:1280px) {
	body { 
		background-image: url('image/bg_1280px.jpg'); 
	}
}
media screen and (min-width:1281px) {
	body { 
		background-image: url('image/bg_3000px.jpg'); 
	}
}

Reageren

Inloggen om te reageren