Obramowania i tło (border, background)

W CSS właściwości border (obramowanie) i background (tło) są nieodzownymi narzędziami do stylizacji elementów na stronach internetowych. Obramowania pomagają wyróżnić elementy, natomiast tła umożliwiają nadanie koloru lub wstawienie obrazu za zawartością elementu.

Obramowanie (border)

Właściwość border pozwala na dodanie ramki do dowolnego elementu HTML. Obramowanie można skonfigurować pod względem szerokości, stylu oraz koloru.

/* W tym przykładzie element div ma czarne obramowanie o grubości 2 pikseli z pełną, ciągłą linią. */

div {
    border: 2px solid black;
}

Elementy obramowania (border)

• szerokość - Można ją ustawić za pomocą wartości w pikselach (px) lub użyć predefiniowanych wartości jak:
  • thin
  • medium
  • thick.
• styl - Określa typ linii obramowania. Najczęściej używane style to:
  • solid - ciągła linia,
  • dashed - przerywana linia,
  • dotted - kropkowana linia,
  • double - podwójna linia
• Kolor - Dowolny kolor, np.
  • black
  • #ff6600
  • rgba(0,0,0,0.5)

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Tło (background)

Właściwość background w CSS umożliwia ustawienie koloru lub obrazu jako tło dla elementu. Tło może obejmować całą powierzchnię elementu lub być precyzyjnie dostosowane do jego rozmiarów.

Przykład z kolorem tła:

/* W powyższym przykładzie element div otrzymuje jasnoniebieskie tło. */
div {
    background-color: lightblue;
}

Obraz w tle (background-image)

CSS pozwala również na użycie obrazów jako tła elementów.

Ustawienia obrazu tła:

• background-repeat - określa, czy obraz ma się powtarzać (repeat, no-repeat).
• background-position - ustawia pozycję obrazu (center, top left).
• background-size - pozwala zmieniać rozmiar obrazu (cover, contain, wartości w pikselach lub procentach).

/* Obraz o nazwie background.jpg zostanie zastosowany jako tło elementu div. */
div {
    background-image: url('background.jpg');
}

Skrócona składnia background

Właściwości tła można także zapisać w jednym wierszu, co upraszcza kod.

W tym przykładzie wszystkie właściwości tła zostały połączone w jeden wiersz. Obraz nie będzie się powtarzał, zostanie wycentrowany i dopasowany do rozmiaru elementu.

div {
    background: url('background.jpg') no-repeat center/cover;
}