Baggrundsbillede med fuld bredde og højde i browseren

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! 😀

3 meninger om “Baggrundsbillede med fuld bredde og højde i browseren”

    1. Der skulle ikke være noget galt med et motiv, men hav in mente at noget af det vil blive dækket af hjemmesidens indhold, så en besøgende med en lille opløsning vil måske kun se lidt grafik i siderne af hjemmesiden.
      Hvis man nu skulle lave noget fuld-baggrund, og siden rent tilfældigvis skulle laves til en filmproduktionsvirksomhed, så skulle man da næsten have gang i noget video-baggrund i stedet 🙂

  1. Hej Rasmus,

    Tak for dit svar. Videobaggrunden på link du gav er rigtig fed! Jeg har set nogle versioner før der ikke rigtig fungerede, men den er rigtig god her.

    Det kunne godt være, at man skulle tænke mere i dén retning. 🙂

    Mange hilsner – Christian

Lukket for kommentarer.