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

Få CSS-linje til at bestemme mest med “!important”

Det kan være bøvlet at få et element i HTML til at makke ret med CSS’en. Specielt hvis vi er rigtig langt “inde” med definitionerne. Hvis vi fx vil have et specifikt menupunkt til at have en anden farve end de andre menupunkter, kunne brugen af “!important” være nødvendig (og at foretrække).

Eksempel:
I følgende eksempel har vi en linje CSS der definerer baggrundsfaven på menupunkterne
div.gk-menu > ul.level0 > li > a { color: #ffffff; }
Vi vil dog gerne have et specifikt menupunkt til at have en anden farve. I vores HTML står der at <a>-tagget har ID’et menu340, så vi skriver #menu340 { color: blue; }.
Men ak, der skete intet med menupunktet.

Problemet er at den øverste kode definerer “hårdere” end det vi lige har skrevet. Jo tættere vi definerer på målet, des vigtigere anser browseren koden. Og i øverste kode er vi helt ude i fjerde niveau. Vi skal altså enten skrive div.gk-menu > ul.level0 > li > a#menu340 { color: blue; }

ELLER

Vi indsætter da bare den lækre !important:

#menu340 { color: blue !important; }
Med det lille ord blev vores definition af #menu340 vigtigst!