Bakgrunner med CSS

[RedRocK]

Hei.

Jeg har en webside jeg holder litt på med. Nå har jeg svart som bakgrunsfarge, men jeg har sett at mange har slik at det er for eks. en lys farge på toppen, og at den blir mørkere nedover (gardient aktig). Jeg kan litt CSS, å lurer derfor på om det er via CSS de setter opp dette, eller om de har laget det som et stort bilde i photoshop?

 

Takker for alle svar

[Arne]

Det du kan gjøre, er at du lager et smalt bilde med gradienten i f.eks. PS, så repeat x'er du bildet.

 

Hvis du trenger mer innhold på siden enn så stor som gradient-bildet er, kan du bare sette background til den fargen som er nederst på gradienten.

[OleeiD]

background: url("gradient.png") 0 0 repeat-x #000000;
height: 100%;

 

Er en måte å gjøre det på.

[4588pkdkrikue5c]

Kva farge vil du ha opperst, og kvifor ein farge nederst?

Velj fargane og lag gradient i Photoshop. Hugs at du ikkje treng å ha den bred, berre long. Så lag eit billete som er 5x1024 eksempelvis.

Sei at den øverste fargen din er kvit, og den nederste svart. Då skriv du slik i CSSen:

body {
margin:0px;
padding:0px;
background:url(photoshop-gradient-fila.png) repeat-x #000;
}

Eg tok berre med margin og padding så det ikkje ser så frykteleg dumt ut. Nå skal eg fortelle kvifor eg gjør som eg gjør - så du forstår bettre og kan lære.

repeat-x betyr å repetere bortover.

#000 (aka #000000) betyr svart. Den kjem ETTER gradienten din som er sort nederst. Det vil seie at for dei som har høgare høgde på oppløysninga enn 1024 fortsett og se svart nedover. Unnlater du å skrive dette vil det bli kvitt etter 1024 pixler nedover er "brukt opp". Heng du med?

 

Eg anbefal deg å bruke PNG til dette. Kan laga eksempel om det trengs.

Lukke til

[Ardinur]

Fint forklart steffenz :]

Men hvorfor er det anbefalt å lage det i PNG?

[4588pkdkrikue5c]

Takk for det

Sjå her.

 

Edit: Berre hos meg det tok lang tid å laste?

Endret 23. september 2008 av steffenz

[Ardinur]

Ja, den tok en god evighet å laste O.o

Men takk for linken :] Nå vet jeg det også ;D