Mens du lager et nettsted eller skriver et blogginnlegg, spiller bilder en viktig rolle i å gjøre ting mer attraktive og forståelige. Uten bilder, enten en blogg eller et nettsted, blir det kjedelig og leserne begynner å miste interessen. Bakgrunnsbilder har også en pragmatisk innvirkning på interaktiviteten til websiden.

Denne artikkelen gir en detaljert guide for å legge til et bakgrunnsbilde i HTML. I tillegg serverer denne artikkelen følgende utfall angående:

• Hvordan legge til et bakgrunnsbilde i HTML
• Hvordan legge til et bakgrunnsbilde i en tag i HTML
• Hvordan legge til et bakgrunnsbilde av websiden i HTML
• Hvordan unngå gjentakelse av bakgrunnsbildet
• Hvordan dekke hele bakgrunnen uten repetisjon
• Hvordan strekke bakgrunnsbilde i HTML

Hvordan legge til et bakgrunnsbilde i HTML

I HTML kan vi legge til et bakgrunnsbilde ved å bruke CSS-eiendomsbakgrunnsbildet. Et bakgrunnsbilde brukes som bakgrunnsbilde på et nettsted eller som et omslagsbilde for en glidebryter. Syntaksen til egenskapen "bakgrunnsbilde" er skrevet nedenfor:

Bakgrunnsbilde: URL ('Bildeavn');

Ovennevnte syntaks er en CSS -egenskap og kan brukes i et eksternt stilark, intern CSS eller Inline CSS.

Eksempel

For en bedre forståelse praktiseres følgende HTML -kode for å legge til et bakgrunnsbilde i HTML.

Dette er et bilde

I dette eksemplet bruker vi bakgrunnsbilde-egenskapen i

Tag for å legge til et bakgrunnsbilde.

Produksjon

Utgangen viser at i HTML kan et bakgrunnsbilde legges til ved hjelp av CSS -egenskap.

Hvordan legge til et bakgrunnsbilde i en tag i HTML

Vi kan også legge til bakgrunnsbilde i et avsnitt ved å bruke intern, inline eller ekstern CSS. Vi kan bruke bakgrunnsbildet til et avsnitt for å lage forskjellige design.

Eksempel

Avsnitt bakgrunn

Dette avsnittet er skrevet for å demonstrere bruken av bakgrunnsbilde med avsnitt.
Dette avsnittet er skrevet for å demonstrere bruken av bakgrunnsbilde med avsnitt. Dette avsnittet er skrevet for å demonstrere bruken av bakgrunnsbilde med avsnitt.
Dette avsnittet er skrevet for å demonstrere bruken av bakgrunnsbilde med avsnitt. Dette avsnittet er skrevet for å demonstrere bruken av bakgrunnsbilde med avsnitt.

I dette eksemplet bruker vi et bakgrunnsbilde for å endre bakgrunnen for avsnittet.

Produksjon

Utgangen viser at vi legger til et bakgrunnsbilde i et avsnitt ved å bruke bakgrunnsbildeegenskapen.

Hvordan legge til et bakgrunnsbilde av websiden i HTML

Vanligvis er bakgrunnen til en webside hvit, men vi kan også endre bakgrunnen til en webside ved hjelp av bakgrunnsbildeegenskaper til HTMLs tag. bakgrunnsbilde.

Eksempel

Kroppsbakgrunn

Mens du lager et nettsted eller skriver et blogginnlegg, spiller bilder en viktig rolle i å gjøre ting mer attraktive og forståelige. Uten bilder, enten en blogg eller et nettsted, blir det kjedelig og leserne begynner å miste interessen.

I dette eksemplet endrer vi bakgrunnen til en webside ved å legge til et bakgrunnsbilde til HTMLBody.

Produksjon

Denne utgangen viser at egenskapen til bakgrunnsbilde har satt bildet til hele siden.

Hvordan unngå gjentakelse av bakgrunnsbildet

Når vi legger til bakgrunn på en webside, gjentar bildet seg for å dekke hele siden som visning nedenfor:

Så for å unngå repetisjon av bilder bruker vi CSS -egenskap Bakgrunnsrepetitt og sett verdien til Ingen repeter Som vist i følgende utgang:

Eksempel

I dette eksemplet fjerner vi bildet repetisjon ved hjelp av bakgrunnsrepeter CSS-egenskap.

Produksjon

Utgangen viser det etter bruk Bakgrunnsrepetitt: No-Repeteat; Eiendomsbilder kommer til deres opprinnelige størrelse og lar resten av siden være tom.

Hvordan dekke hele bakgrunnen uten repetisjon

De bakgrunnsstørrelse og Bakgrunnsinnveksling Egenskaper kan brukes til å sette et bilde til hele bakgrunnen. For å gjøre det, må du bruke dekke og fikset verdier av bakgrunnsstørrelse og Bakgrunnsinnveksling egenskaper.

Eksempel

I dette eksemplet har vi brukt Bakgrunnsstørrelse: Dekk For å legge til et bakgrunnsbilde til hele websiden uten repetisjon. Og Bakgrunnsinnrikt: Fast Eiendom fjerner rulleeffekten.

Produksjon

Ovennevnte utdata viser at egenskapen til bakgrunnsstørrelse dekker hele websiden, men den forblir rullbar, for å fjerne rulleeffekten vi brukte bakgrunnsinnstillingen.

Hvordan strekke bakgrunnsbilde i HTML

Du kan strekke bakgrunnsbildet for å unngå repetisjon av et bilde. Å gjøre det, den bakgrunnsstørrelse og Bakgrunnsinnveksling CSS -egenskaper.

Eksempel

I dette eksemplet har vi brukt Bakgrunnsstørrelse: 100% 100%. De første 100 refererer til bredden og andre 100 identifiserer høyden som til slutt strekker bildet. Samtidig som Bakgrunnsinnrikt: Fast

Produksjon

Ovennevnte utgang viser egenskapen til bakgrunnsstørrelse for å strekke bildet, men det forblir rullbar, for å fjerne rulleeffekten vi brukte bakgrunnsinnstillingen.

Konklusjon

I HTML, bakgrunnsbilde Eiendom brukes til å legge til et bakgrunnsbilde . Denne artikkelen tar sikte på å legge til et bakgrunnsbilde i HTML. Bakgrunnsbildet kan legges til et enkelt HTML-element eller hele websiden. Videre kan bakgrunnsbildet tilpasses ved å bruke forskjellige CSS-egenskaper som bakgrunnsstørrelse, bakgrunnsinnstillinger eller bakgrunnsrepeterende egenskaper. Vi har også gitt et innblikk i å bruke disse egenskapene for å manipulere bakgrunnsbilde. bakgrunnsbilde.