Hvordan legge til en BG til en side

CSS, en forkortelse for Cascading Style Sheet, har en nyttig BG eiendom du kan bruke til å forbedre dine nettsteder. BG, eller bakgrunn eiendom, tillater utviklere å plassere bilder i en webside bakgrunn i en rekke måter. BG Eiendommen har også en farge parameter du kan bruke til å legge farge til sidene. Ved å lære noen CSS-regler, kan du opprette og oppdatere bakgrunn raskt ved hjelp av noen få linjer med CSS-kode.

Bruksanvisning

1 Start Notepad og åpne en av HTML-dokumenter.

2 Finn dokumentet er "head" -seksjonen og lim inn denne koden i den delen:

<Style type = "text / css">

kropp

{Background-color: blue;}

</ Style>

Dette CSS kode oppretter en blå bakgrunn for websiden.

3 Endre det farge til en annen farge som rød eller grønn og lagre dokumentet. Åpne den i nettleseren din og vise Web-siden. Sin bakgrunn vil være den fargen du har valgt.

4 Gå tilbake til HTML-dokumentet. Bytt forrige koden med denne CSS-kode:

<Style type = "text / css">

kropp

{

background-image: URL ( 'xyz.gif'); background-repeat: repeat;

}

</ Style>

Erstatt "xyz.gif" med navnet på et lite bilde fil på harddisken. Bruke "bakgrunnsbilde" tag gjør at bildet du velger å fremstå som en webside bakgrunn. Den "background-repeat" egenskapen avgjør om det bilde gjentar eller ikke. I dette eksempelet er eiendommens verdi "repeat".

5 Lagre dokumentet og vise den i nettleseren din. Nettsiden vil vise et flislagt, gjenta bakgrunn.

6 Gå tilbake til HTML-dokumentet og slette CSS-koden. Lim inn følgende kode i stedet:

<Style type = "text / css">

kropp

{

background-image: URL ( 'xyz.jpg'); background-repeat: no-repeat; background-posisjon: 100px 200px;

}

</ Style>

Erstatt "xyz.jpg" med navnet på et større bilde på harddisken. Merk at "background-repeat" har en verdi på "no-repeat". Dette hindrer leseren fra å gjenta bildet. Den "background-position" verdien gjør det mulig å plassere bildet på websiden. I dette tilfellet, den første verdien "100px", plasserer bilde 100 piksler fra sidens venstre kant. Den "200px" verdi setter bilde 200 piksler fra toppen.

7 Endre disse pikselverdiene til noe du liker. Lagre HTML-dokumentet og åpne den i nettleseren din. Et enkelt, nonrepeating Bildet vises i den posisjonen du satt i CSS.

Hint

  • Det er andre egenskaper du kan angi for å styre plasseringen og justeringen av bakgrunnsbilder. For eksempel, i stedet for å spesifisere et bildes posisjon på en side ved hjelp av piksler, kan du bruke søkeord som "venstre" og "topp". Online HTML tutorials og bøker kan hjelpe deg å lære disse bakgrunnsegenskaper.