Hvordan du endrer bakgrunnsbilde for HTML5 og CSS3 programmering - dummies

Du kan bruke img-taggen til å legge til et bilde på HTML5-siden din, men noen ganger vil du bruke bilder som bakgrunn for et bestemt element eller for hele siden. Du kan bruke bakgrunnsbilde-CSS-regelen til å bruke et bakgrunnsbilde til en side eller elementer på en side.

Bakgrunnsbilder er enkle å bruke. Koden for backgroundImage. html viser hvordan:

backgroundImage. html kropp {bakgrunnsbilde: url ("ropeBG. jpg");} h1 {bakgrunnsbilde: url ("ropeBGLight. jpg");} p {bakgrunnsfarge: hvit; bakgrunnsfarge: rgba (255, 255, 255, 85);}

Bruke bakgrunnsbilder
Overskriften bruker en lettere versjon av bakgrunnen, og avsnittet bruker en solid farget bakgrunn med lys gjennomsiktighet.
Overskriften bruker en lettere versjon av bakgrunnen, og avsnittet bruker en solid farge bakgrunn med lys gjennomsiktighet.

Ved å legge bakgrunnsbildet til et element gjennom CSS er det ikke vanskelig. Her er de generelle trinnene:

1. Finn eller lag et passende bilde og legg det i samme katalog som siden, slik at det er enkelt å finne.

2. Legg til bakgrunnsbildestilregelen på siden du vil bruke bildet på.

   Hvis du vil bruke bildet på hele siden, bruker du elementet.

3. Fortell CSS der bakgrunnsbilde er ved å legge til en URL-ID.

   Bruk søkeordets url () for å indikere at neste ting er en adresse.

4. Skriv inn adressen til bildet.

   Det er enklest hvis bildet er i samme katalog som siden. Hvis det er tilfelle, kan du bare skrive bildenavnet. Pass på at du omgir nettadressen med anførselstegn.

5. Test ditt bakgrunnsbilde ved å se websiden i nettleseren din.

   Mye kan gå galt med bakgrunnsbilder. Bildet er kanskje ikke i riktig katalog, du har kanskje feilstavet navnet sitt, eller du har kanskje glemt biten.

Få en bakgrunnskontroll

Det er ganske enkelt å legge til bakgrunner, men bakgrunnsbilder er ikke perfekte. Her er en side med en fin bakgrunn. Dessverre er teksten vanskelig å lese.

Bakgrunnsbilder kan legge til mange zing på sidene dine, men de kan introdusere noen problemer, for eksempel

• Bakgrunnsbilder kan legge til filstørrelsen. Bilder er veldig store, så et stort bakgrunnsbilde kan gjøre siden din mye større og vanskeligere å laste ned.

• Noen bilder kan gjøre siden din vanskeligere å lese. Et bilde i bakgrunnen kan forstyrre teksten, slik at siden kan være mye vanskeligere å lese.

• Gode bilder gir ikke god bakgrunn. Et godt bilde trekker øyet og retter oppmerksomhet til det. Jobben med et bakgrunnsbilde er å falme inn i bakgrunnen. Hvis du vil at folk skal se på et bilde, legg det inn. Bakgrunnsbilder bør ikke hoppe inn i forgrunnen.

• Bakgrunnen må være lav kontrast. Hvis bakgrunnsbildet ditt er mørkt, kan du gjøre lystekst synlig. Hvis bakgrunnsbildet er lys, vises mørk tekst opp. Hvis bildet ditt har lyse og mørke områder (som nesten alle gode bilder), er det umulig å finne en tekstfarge som ser bra ut mot det.