Hoi Sylvia en glompie,
Glompie zegt:
Als het goed is trekt hij de achtergrond foto gewoon aan alle zijden uit tot de resolutie van het scherm.
Jammer genoeg werkt dat niet (
testpagina met de code van nr. #6 hierboven), want de foto zit er in als
background-image, en background-images kunnen niet meeschalen met het formaat van het beeldscherm of het browser-venster. *)
De foto zit dan wel gecentreerd (horizontaal en verticaal), maar wat er niet op past van de foto ... wordt afgesneden. En met de scrollbar kan je er ook niet bij komen (vanwege de
fixed positie).
Bv.: in een resolutie van 1024*768px:
Je zou de foto kunnen verkleinen, maar dan wordt deze weer niet beeldvullend bij de grotere schermen.
======
Alternatief!
Maar het kan wel op een andere manier.
Een
voorgrond-image kan wel meeschalen met de container <div> waar de afbeelding in zit. En een <div> kan met een fixed positie weer vastgemaakt worden aan de hoogte en breedte van het scherm van dat moment. Samen gaat het dan goed!
Deze heeft supersimpele html-code:
HTML:
...
<body>
<div id="background">
<img src="images/chien-noble-background.jpg" alt="" />
</div>
<h1>Kennel <span>'Chien Noble' | Peruaanse naakthonden | Perro sin pelo del Peru</span></h1>
<ul>
<li><a id="nl" href="http://chiennoble.com/peruaanse_naakthond_rasstandaard.html"><span>Nederlands</span></a></li>
<li><a id="en" href="http://chiennoble.com/peruvian_hairless_dog.html"><span>English</span></a></li>
<li><a id="fr" href="http://chiennoble.com/race_chien_nu_du_perou.html"><span>Français</span></a></li>
</ul>
</body>
</html>
De css is in de <head> opgenomen:
Code:
html {
height: 100%;
padding-bottom: 1px;
background: #261C16;
color: #3E322B;
}
body {
height: 95%;
margin: 15px 12.5% 0 12.5%;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
position: relative;
}
h1 {
margin: 0;
padding: 20px;
}
span {
position: absolute;
left: 0;
margin-left: -9999px;
}
#background {
position: fixed;
left: 0;
right: 0;
top: 15px;
bottom: 0;
z-index: -1;
}
#background img {
width: 100%;
}
ul {
position: absolute;
top: 94%;
left: 50%;
right: 0;
margin: 0 0 0 -204px;
padding: 0;
list-style: none;
}
li {
margin: 0 10px;
padding: 0;
float: left;
}
a {
width: 116px;
height: 24px;
display: block;
background: url(images/chien-noble-knoppen.gif);
}
#nl { background-position: 0 0; }
#en { background-position: -116px 0; }
#fr { background-position: -232px 0; }
#nl:hover, #nl:focus { background-position: 0 -24px; }
#en:hover, #en:focus { background-position: -116px -24px; }
#fr:hover, #fr:focus { background-position: -232px -24px; }
En er is heel veel weggelaten:
- Er zat een "png-fix" javascript bij om transparante png-afbeeldingen ook in Internet Explorer 6 te kunnen tonen. Maar IE6 wordt niet meer gebruikt, en dit script is onnodig. En de transparante png voor de tekst-afbeelding is er niet meer (zie hieronder), dan is het helemaal overbodig.
- Er zat een "rollover" javascript bij voor het wisselen van afbeelding bij hoveren over de taalknoppen. Maar dat kan veel beter met css gedaan worden, en ook dit script is onnodig.
- De achtergrondfoto van maar liefst 3MB (3.055 kB !) is inderdaad veel te groot en niet nodig. Het kan ook met een afbeelding van ... 76 kB (deze)! Zo'n 97,5% van de download-tijd voor de foto is dus overbodig.
- De tekst-afbeelding (250 kB) is ook niet nodig: deze zit nu opgenomen in de foto (en dan wordt ook de tekst automatisch groter of kleiner met het beeldschermformaat).
- De 6 images voor de talenknoppen (3 gewone, en 3 voor de hovers) zijn ook niet nodig: dat kan met 1 afbeelding waar ze allemaal tegelijk in zitten; via css wordt telkens een partje gebruikt - en preloaden is ook niet nodig.
De nieuwe "achtergrond"-afbeelding is nu 1280px bij 800px geworden: met links en rechts een stukje extra, zodat bij breedbeeld-schermen ook de voeten getoond worden (bij een meer vierkante afbeelding vallen die er af).
Resultaat van m'n bovenstaande testpagina
De pagina is razendsnel geworden: downloadtijd was
3,2 sec, is nu
0,4 sec.
Hieronder een vergelijking van de originele pagina (links) en de testpagna (rechts).
Resultaat op resolutie 1280*1024px (desktop):
Resultaat op resolutie 1024*768px (desktop en groot tablet):
Resultaat op resolutie 800*600px (klein tablet):
Bij alle grotere en tussenliggende formaten (en verandering van browser-window) zoomt het hele beeld steeds mee.
=======
Maar ... of een pagina als deze via Studio Webdesign gelanceerd kan worden, weet ik niet.
Als het niet kan, kan het gelukkig ook anders (en erg Jip & Janneke
), helemaal buiten Studio Webdesign om.
Met vriendelijke groet,
CSShunter
_____________
*) Dwz niet met css2; wel met css3, maar dat wordt nog niet door alle in omloop zijnde browsers ondersteund.
PS: "François" (op de knop) is wel Frans, maar dan de jongensnaam Frans. In het Frans is de taal Frans: "Français". Wel een leuke tikfout!
