Hvordan lage en fast bakgrunn i CSS

November 18

Du kan lage websider med mange stilegenskaper. Ved hjelp av HTML og CSS (Cascading Style Sheets) kan du angi ulike stilregler som bestemmer hvordan innholdet på websiden vises. Blant de stilegenskaper du kan erklære i CSS er bakgrunnen. Du kan angi bakgrunnsegenskaper for elementer og for HTML-siden som helhet. En bakgrunn kan også inneholde et bilde som kan gjentas for å fylle den ledige plassen og eventuelt fast slik at den ikke beveger seg når brukeren ruller siden.

Bruksanvisning

1 Lag din webside. Hvis du ikke allerede har en webside bygget bruk følgende eksempelstruktur som inneholder en lenke til et eksternt stilark:

<Html>

<Head>

</ Head>

<Body>

<Div> Her er innholdet på siden </ div>

</ Body>

</ Html>

Siden inneholder en enkelt "div" element utelukkende for å demonstrere. Hvis du ønsker å gi din CSS-filen et annet navn, endre "link" element "href" attributt som passer navnet du velger.

2 Forbered bakgrunnsbilde. Hvis du allerede har en bildefil du ønsker å bruke i bakgrunnen på websiden, laste det opp til webserveren. Dersom bildefilen er stor i størrelsen du ønsker å optimalisere det å redusere tiden det tar å laste ned over nettet når folk se siden din. Hvis du laster ned et bilde å bruke som siden bakgrunn eller skaper den ved hjelp av en grafisk design program dette er også en tilrådelig trinn. Du kan redusere filstørrelsen for et bilde ved å velge innstillinger for bildekvalitet når du lagrer den i et program som Photoshop, Paint.NET eller GIMP (GNU Image Manipulation Program).

3 Lag din CSS-kode ved å åpne en ny fil i et tekstredigeringsprogram, lagre det med navnet "backstyle.css" eller noen andre navn du foretrekker det, husker "href" attributt i HTML "link" element må samsvare med dette navnet. Skriv inn følgende kode innstilling valgt bilde som bakgrunn:

body {background: # 000000 URL ( "images / bgpic.jpg");}

Denne koden forutsbildefilen skal lagres i en katalog som heter "bilder" som er lagret i samme mappe som selve nettsiden. Endre koden som passer navnet og plasseringen av bildefilen hvis det er nødvendig. Koden indikerer også at ethvert område som ikke dekkes av bakgrunnsbildet skal være farget svart.

4 Endre din CSS-kode for å diktere om bakgrunnsbildet er gjentatt eller ikke. Følgende kode viser at bildet vil bli gjentatt på "y" aksen, men ikke på "x" akse:

bakgrunn: # 000000 URL ( "images / bgpic.jpg") gjenta-y;

Andre valgfrie verdier for bakgrunnen repetisjon inkludere "gjenta-x" for å gjenta på "x" aksen og "no-repeat" for å vise bildet én gang. Hvis du ikke har verdi for bakgrunnen gjenta eiendom, er standard til for at bildet skal gjentas langs begge akser.

5 Endre din CSS-kode for å fikse bakgrunnsbildet. Følgende utvidede kode setter alle bakgrunns egenskaper i en enkelt erklæring, herunder fast innstilling:

bakgrunn: # 000000 URL ( "images / bgpic.jpg") gjenta-y fast;

Legge ordet "faste" angir at når siden er rullet av brukeren bakgrunnsbildet vil ikke rulle sammen med det, men vil forbli i samme posisjon. Lagre filene dine, laste dem opp til serveren din og gå til dem for å teste sitt utseende.

Hint

En effektiv bakgrunnsbilde kan skape et stilig utseende på en side uten behov for detaljert grafisk design arbeid.
En gjentatt bakgrunnsbilde kan se forvirrende avhengig av det aktuelle bildet.