Full page background image
Code (php)
1
2
3
4
2
3
4
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
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 ?
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.
css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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');
}
}
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');
}
}