Fed baggrund til din hjemmeside

30-06-11 brianbrandt 2 kommentarer

For at gennemgå denne guide bør du have en basal viden inden for HTML og CSS.

I denne guide vil du lære at lave en dynamisk baggrund til din hjemmeside, kun ved hjælp af CSS. Jeg vil forsøge at skabe følgende hjemmeside.

Denne effekt er kendt under navnet: css parallax effect.

Se eksempel her

(Prøv at resize vinduet)

De to baggrunde på denne side vil flyde mod hinanden når man resizer browser-vinduet.

Den basale opsætning:

Start med at sætte selve siden op. Du skal bruge body-tagget og et div-tag inden I body-tagget, som fylder hele bodyen for at skabe to modstridende effekter. Selve HTML-koden for baggrunden kunne se således ud.


<html>

<head>

<title>Fed css baggrund</title>

</head>

<body>

<div id="bg_effect"></div>

</body>

</html>

 

Dertil følgende CSS-kode.


body {

width: 100%;

height: 100%;

margin: 0; padding: 0;

background: #cceeff url('images/fugle.png') repeat-x -70% 0;

}

#bg_effect {

width: 100%;

height: 50px;

position: absolute;

bottom: 0;

display: block;

background: url('images/grass.png') repeat-x 200% 0;

}

Først sørger vi for, at body-tagget fylder hele browser-vinduet. Det gør vi ved hjælp af width(bredte), height(højde) og margin/padding (margen).

Så fortæller vi, at den skal hente et billede (fugle) fra mappen images og lægge den ind som baggrund. Vi fortæller den også, at billedet skal gentage sig selv på x-aksen, dvs. kun horizontalt.  Igen gælder det samme for bg-effect-div-tagget.

De sidste to tal bestemmer billedets position/placering på siden. Det første tal bestemmer den horizontale (vandrette) placering og det andet tal den verticale (lodrette) placering.

Ved at give baggrunds-billedet i body-tagget en horizontal placering på en negativ procentsats, fortæller vi den, at den skal forholde sig til højre side og derfor bevæge sig modsat af den vej vi resizer vores browser-vindue.

Vi giver så det ander baggrundsbillede en positiv procentsats, for at den skal bevæge sig samme vej som vi resizer browser-vinduet (bare hurtigere end vi gør det).

Forvirret? Bare rolig, du er lige ved at være der.

Nu skal du lave de to billeder du gerne vil have til at bevæge sig mod hinanden.

Jeg har valgt følgende billeder.

(billederne må gerne kopieres til brug i test af parallax effekten)

Jeg ligger dem så ind i min image-mappe, og woila! Nu virker det som det skal…

 

Du kan se flere eksempler på denne effekt her:

http://haven-online.dk/

http://demo.marcofolio.net/a_parallax_illusion_with_css/

http://css-tricks.com/examples/StarryNight/

http://dromaeo.com/

http://www.sitepoint.com/examples/stretchy/test.php

http://www.silverbackapp.com/



Discussion

  • Dennis S. L. Jørgensen

    Hvor er det fedt at læse sådanne små tips og tricks. Keep ‘em coming! 🙂

    30-06-11
  • Bjørn Grønkjær

    Smart det ser godt ud.

    30-06-11
  • Der er lukket for kommentarer