CSS background-color

CSS background-color

Właściwość background-color w CSS służy do ustawiania koloru tła elementu HTML. Może być użyta np. dla bloków div, akapitów, nagłówków, sekcji strony, tabel czy przycisków.

Składnia

div {
  background-color: blue;
}

Powyższy zapis oznacza: wybierz wszystkie elementy div i ustaw im tło na kolor niebieski.

Przykładowe wartości

Kolor tła można zapisać na kilka sposobów:

background-color: blue;        /* nazwa koloru */
background-color: #0000ff;     /* zapis szesnastkowy */
background-color: rgb(0,0,255);/* RGB */
background-color: hsl(240,100%,50%); /* HSL */
background-color: transparent; /* przezroczyste tło */

Czego nie mylić?

• background-color zmienia tło elementu.
• color zmienia kolor tekstu.
• border-color zmienia kolor obramowania.
• box-shadow odpowiada za cień elementu, a nie za jego tło.

Przykład w HTML i CSS

<div class="box">Przykładowy blok</div>

.box {
  background-color: blue;
  color: white;
  padding: 20px;
}

W tym przykładzie blok ma niebieskie tło, biały tekst i wewnętrzny odstęp. W pytaniach egzaminacyjnych poprawną odpowiedzią dla zmiany tła jest zapis z właściwością background-color.