CSS Baggrundsbillede - Sådan tilføjes en billed-URL til din Div

Sig, at du vil placere et eller flere billeder på en webside. En måde er at bruge background-imageCSS-ejendommen.

Denne egenskab anvender et eller flere baggrundsbilleder på et element, som f.eks. A , som dokumentationen forklarer. Brug det af æstetiske grunde, såsom at tilføje en struktureret baggrund til din webside.

Tilføj et billede

Det er let at tilføje et billede ved hjælp af background-imageejendommen. Angiv bare stien til billedet i url()værdien.

Billedstien 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"); } 

Tilføj flere billeder

Du kan anvende flere billeder på background-imageejendommen.

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 meget kode. Lad os nedbryde det.

Adskil hver billedværdi url()med et komma.

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

Placer og forbedr dine billeder nu ved at anvende yderligere egenskaber.

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

Der er flere underegenskaber, du kan tilføje til dine baggrundsbilleder, såsom background-repeatog background-position, som vi brugte i ovenstående eksempel. Du kan endda tilføje gradienter til et baggrundsbillede.

Se hvordan det ser ud, når vi sætter alt sammen.

Bestil spørgsmål

Den rækkefølge, som du angiver dine billeder i, betyder noget på grund af stabelrækkefølgen. Det betyder, at det første billede, der er anført, er tættest på brugeren ifølge dokumentationen. Derefter den næste og den næste osv.

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 angivet to billeder i koden ovenfor. Det første billede (marokko-blå.png) vil være foran det andet (oriental-tile.png). Begge billeder har samme størrelse og mangler opacitet, så vi ser kun det første billede.

Men hvis vi flytter det andet billede (oriental-tile.png) over til højre med 200 pixels, så kan du se en del af det (resten forbliver skjult).

Sådan ser det ud, når vi sætter alt sammen.

Hvornår skal du bruge baggrundsbillede?

Der er meget at lide ved background-imageejendommen. Men der er en ulempe.

Billedet er muligvis ikke tilgængeligt for alle brugere, påpeger dokumentationen som dem, der bruger skærmlæsere.

Det skyldes, at du ikke kan tilføje tekstoplysninger til background-imageejendommen. Som et resultat vil billedet blive savnet af skærmlæsere.

Brug background-imagekun ejendommen, når du har brug for at tilføje noget dekoration til din side. Ellers skal du bruge HTML- elementet, hvis et billede har betydning eller formål, som dokumentationen bemærker.

På den måde kan du tilføje tekst til et billedelement ved hjælp af altattributten, der beskriver billedet. Den angivne tekst bliver afhentet af skærmlæsere.

Tænk på det på denne måde: background-imageer en CSS-egenskab, og CSS fokuserer på præsentation eller stil; HTML fokuserer på semantik eller mening.

Når det kommer til billeder, har du muligheder. Hvis der er brug for et billede til dekoration, kan background-imageejendommen være et godt valg for dig.

Jeg skriver om at lære at programmere og de bedste måder at gøre det på ( amymhaddad.com).