HTML-bakgrund

En bra bakgrund gör webbplatsen särskilt imponerande.

Exempel

Bra kombination av bakgrund och färg
Ett exempel på bra kombination av bakgrundsfärg och textfärg som gör det lätt att läsa texten på sidan.
Dålig kombination av bakgrund och färg
Ett exempel på dålig kombination av bakgrundsfärg och textfärg som gör det svårt att läsa texten på sidan.

(Du kan hitta fler exempel längst ner på sidan)

Bakgrund (Backgrounds)

<body> Har två taggar för att konfigurera bakgrund. Bakgrund kan vara en färg eller en bild.

Bakgrundsfärg (Bgcolor)

Bakgrundsfärg-attributet ställer in bakgrunden till en viss färg.Attributvärdet kan vara ett hexadecimalt nummer,RGB-värde eller färgnamn.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Alla ovanstående koder ställer in bakgrundsfärgen till svart.

Bakgrund (Background)

Bakgrundsegenskapen ställer in bakgrunden till en bild. Egenskapvärdet är bildens URL. Om bildens storlek är mindre än webbläsarens fönster, kommer bilden att kopieras över hela webbläsarfönstret.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

URL kan vara en relativ adress, som i det första raden av koden. Det kan också vara en absolut adress, som i det andra raden av koden.

Tips:Om du avser använda bakgrundsbilder, måste du komma ihåg följande punkter:

  • Har bakgrundsbilden ökat sidans laddningstid. Tips: bildfilen bör inte vara större än 10k.
  • Har bakgrundsbilden bra kombination med andra bilder på sidan?
  • Har bakgrundsbilden bra kombination med textfärgen på sidan?
  • Ser bilden bra ut när den är täckt över på sidan?
  • Blir uppmärksamheten på texten avbrytande av bakgrundsbilden?

Grundläggande hänsynstaganden - användbara tips:

Bakgrundsfärg (bgcolor), bakgrund (background) och text (text) attributen i den senaste HTML-standarden (HTML4 och XHTML) har avskaffats. W3C har tagit bort dessa attribut från sina rekommenderade standarder.

Man bör använda kaskadstilar (CSS) för att definiera layout och displayegenskaper för HTML-element.

Mer exempel

Starkt tillgänglig bakgrundsbild
Exempel på bakgrundsbilder och textfärg som gör webbplatsens text lätt att läsa.
Starkt tillgänglig bakgrundsbild 2
Ett annat exempel med bakgrundsbilder och textfärg som gör webbplatsens text lätt att läsa.
Bakgrundsbilder med dålig tillgänglighet
Exempel på bakgrundsbilder och textfärg som gör webbplatsens text svår att läsa.