Vi kan med CSS få et billede til at vises med fuld bredde og højde i browseren, bag indholdet af hjemmesiden. Så slipper man for at baggrunden abrupt stopper, eller kopierer sig selv i det uendelige.
Se et eksempel her
Vi indsætter først et billede i toppen af vores kode (det er lige meget hvor, men vi vil gerne have det til at indlæse så tidligt som muligt ved pageload). Billedet får klassen “bg”:
<img src="../images/background.jpg" class="bg" />
Den følgende CSS kode ‘vrider’ billedet til den fulde browserbredde, uden at ændre på dimensionerne:
height: auto; /* Højden må ikke afvige fra billedets dimensioner - vis altid det samme format */
top: 0; /* Positioner billedet i toppen */
left: 0; /* Positioner også billedet helt til venstre*/
min-height: 100%; /* Minimumshøjden er billedets 'naturlige' højde */
min-width: 1024px; /* Minimumsbredde, så billedet ikke tvinges lavere */
position: fixed; /* Billedet forbliver stationært */
width: 100%; /* Bredden skal fylde hele browseren - med mindre denne er mindre end 1024 pixels, som defineret ovenfor */
z-index: -1; /* Billedet skal være bagved andet indhold. Denne skal ændres hvis der er andre elementer med lavere z-akse indhold. */
God fornøjelse! 😀