Html- css bakgrunnsbilde viser ikke

CSS tilbyr mange stylingegenskaper for HTML -elementer. Mer spesifikt er det å legge til bakgrunnsbilder ved hjelp av CSS en av de viktige designoppgavene. Å jobbe med bakgrunnsbilder kan imidlertid være utfordrende til tider. Dette er fordi flere andre faktorer kan forhindre at bakgrunnsbildet viser.

Dette innlegget vil dekke følgende:

• Hvordan du angir bilde -url riktig?
• Hvordan du angir bildens overordnede elementstørrelse?
• Hvordan du kobler CSS -filen riktig?
• Hvordan sette CSS “bakgrunn" egenskaper?

Hvordan du angir bilde -url riktig?

Bakgrunnsbildet lastes ikke på nettleseren hvis URL er feil. Analyser eksemplet omtalt nedenfor for å bli kjent med problemet med den aktuelle løsningen.

Eksempel

I HTML, legg til en "”Element og tilordne det klassen“Banner-img”:

Stil “banner-img” -klasse

.banner-img
Bredde: 400px;
Høyde: 300px;
Bakgrunnsbilde: URL (/IMG/Light-Bulbs-5488573_1920.jpg);
Bakgrunnsstørrelse: Deksel;

I følge den gitte kodebiten:

• “bredde”Bestemmer elementets bredde.
• “høyde”Justerer elementets høyde.
• “bakgrunnsbilde”Spesifiserer bildens URL.
• “bakgrunnsstørrelse”Med verdien”dekke”Passer bildet i hele beholderen.

Produksjon

Hvis du legger til feil av URL -en som nevnt i kodeblokken nedenfor, vil 404 -feilen oppstå:

.banner-img
Bredde: 400px;
Høyde: 300px;
Bakgrunnsbilde: URL (/IMG/PULBS-5488573_1920.jpg);
Bakgrunnsstørrelse: Deksel;

Høyreklikk på websiden og velg "undersøke”Alternativ, vil utviklerens verktøyvindu vise statusen til ressursen:

Hvordan du angir bildens overordnede elementstørrelse?

Noen ganger klarer ikke bildet å laste på websiden hvis det ikke er angitt at det er angitt størrelse.

Analyser eksemplet nedenfor.

Eksempel

Legg til en "”Element og tilordne det klassen“banner”:

.innhold
Bakgrunnsbilde: URL (/IMG/Light-Bulbs-5488573_1920.jpg);
Bakgrunnsstørrelse: Deksel;
Bredde: 400px;
Høyde: 500px;

Her:

• “bakgrunnsbilde”Angir bakgrunnsbildets url.
• “bakgrunnsstørrelse”Angir bildens størrelse. Mer spesifikt, “dekke”Verdien dekker hele beholderen.

Produksjon

Hvordan du kobler en CSS -fil riktig?

Hvis du bruker det eksterne stilarket, må du sørge for at "”Element må være riktig spesifisert. Filnavnet må være riktig spesifisert i "href" Egenskap:

Hvordan sette CSS “bakgrunn” -egenskaper?

CSS “bakgrunn”Egenskaper må være riktig spesifisert til elementene:

.banner-img
Margin: Auto;
Bredde: 400px;
Høyde: 250px;
Bakgrunnsbilde: URL (/IMG/Light-Bulbs-5488573_1920.jpg);
Bakgrunnsstørrelse: Deksel;
Bakgrunnsposisjon: sentrum;
Bakgrunnsrepetitt: No-Repeteat;

Her:

• “bakgrunnsbilde”Angir bakgrunnsbildets URL.
• “bakgrunnsstørrelse”Angir bakgrunnsbildets størrelse.
• “Bakgrunnsposisjon”Justerer bakgrunnsbildets posisjon.
• “Bakgrunnsrepetitt”Bestemmer om bildet gjentas eller ikke.

CSS “bakgrunn”Eiendom kan spesifiseres som en kortfattet eiendom som denne:

Bakgrunn: URL (/IMG/Light-Pærer-5488573_1920.jpg) senter/dekk ingen repetisjon;

Merk: Bakgrunnsposisjonen og bakgrunnsstørrelsen må skilles med "/”Slash som nevnt i ovennevnte kodeblokk. Ellers vil det ikke vise bildet.

For å bekrefte, inspisere siden og observere utviklerverktøyvinduet, vil du se følgende:

Dette er årsakene og fikser for CSS bakgrunnsbilde som ikke viser problem.

Konklusjon

For å laste bakgrunnsbildet riktig, må mange faktorer vurderes. Disse inkluderer å stille inn bilde -URL -en riktig, justere overordnede elementets bredde og høyde, riktig inkludert koblingen til det eksterne stilarket, og spesifisere CSS "bakgrunn”Egenskaper riktig. Dette innlegget har forklart at fikser for bakgrunnsbilder som ikke viser problemet.