CSS-bakgrunnsbilde - Slik legger du til en bilde-URL til Div

Si at du vil sette et bilde eller to på en webside. En måte er å bruke background-imageCSS-egenskapen.

Denne egenskapen bruker ett eller flere bakgrunnsbilder på et element, som en , som dokumentasjonen forklarer. Bruk den av estetiske grunner, for eksempel å legge til en strukturert bakgrunn på websiden din.

Legg til et bilde

Det er enkelt å legge til et bilde ved hjelp av background-imageeiendommen. Bare gi stien til bildet i url()verdien.

Bildestien kan være en URL, som vist i eksemplet nedenfor:

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

Eller det kan være en lokal sti. Her er et eksempel:

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

Legg til flere bilder

Du kan bruke flere bilder på background-imageeiendommen.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 

Det er mye kode. La oss bryte det ned.

Skill hver bildeverdi url()med komma.

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

Nå kan du plassere og forbedre bildene dine ved å bruke flere egenskaper.

background-repeat: no-repeat, no-repeat; background-position: right, left; 

Det er flere underegenskaper du kan legge til i bakgrunnsbildene dine, for eksempel background-repeatog background-position, som vi brukte i eksemplet ovenfor. Du kan til og med legge graderinger til et bakgrunnsbilde.

Se hvordan det ser ut når vi legger alt sammen.

Bestill saker

Rekkefølgen du viser bildene dine i, betyr noe på grunn av stabelrekkefølgen. Det betyr at det første bildet som er oppført er nærmest brukeren, ifølge dokumentasjonen. Så, den neste, og den neste, og så videre.

Her er et eksempel.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 

Vi har oppført to bilder i koden ovenfor. Det første bildet (marokko-blå.png) vil være foran det andre (oriental-tile.png). Begge bildene har samme størrelse og mangler opasitet, så vi ser bare det første bildet.

Men hvis vi flytter det andre bildet (oriental-tile.png) over til høyre med 200 piksler, så kan du se en del av det (resten forblir skjult).

Slik ser det ut når vi setter alt sammen.

Når skal du bruke bakgrunnsbilde?

Det er mye å like ved background-imageeiendommen. Men det er en ulempe.

Bildet er kanskje ikke tilgjengelig for alle brukere, påpeker dokumentasjonen, som de som bruker skjermlesere.

Det er fordi du ikke kan legge til tekstinformasjon til background-imageeiendommen. Som et resultat vil bildet bli savnet av skjermlesere.

Bruk background-imageeiendommen bare når du trenger å legge til litt dekorasjon på siden din. Hvis ikke, bruk HTML- elementet hvis et bilde har betydning eller formål, som dokumentasjonen bemerker.

På den måten kan du legge til tekst i et bildeelement ved hjelp av altattributtet, som beskriver bildet. Den angitte teksten blir plukket opp av skjermlesere.

Tenk på det på denne måten: background-imageer en CSS-egenskap, og CSS fokuserer på presentasjon eller stil; HTML fokuserer på semantikk eller mening.

Når det gjelder bilder, har du muligheter. Hvis et bilde er nødvendig for dekorasjon, kan background-imageeiendommen være et godt valg for deg.

Jeg skriver om å lære å programmere og de beste måtene å gjøre det på ( amymhaddad.com).