Pozadí

Vlastnosti pozadí v CSS nám umožňují vyplnit pozadí elementů barvami, obrázky nebo gradienty.

• background-color

  Nastaví plnou barvu pozadí elementu. Můžeme použít názvy barev, hexadecimální kódy, RGB nebo RGBA hodnoty.

  body {
      background-color: #f0f8ff; /* AliceBlue */
  }
  .karta {
      background-color: rgba(255, 255, 255, 0.9); /* Bílá s 90% průhledností */
  }

• background-image

  Nastaví obrázek jako pozadí elementu. Cesta k obrázku se uvádí pomocí funkce url().

  body {
      background-image: url('cesta/k/obrazku.jpg');
  }

• background-repeat

  Určuje, jak se má obrázek pozadí opakovat. Časté hodnoty jsou:

  • repeat: Opakuje se horizontálně i vertikálně (výchozí).
  • repeat-x: Opakuje se pouze horizontálně.
  • repeat-y: Opakuje se pouze vertikálně.
  • no-repeat: Obrázek se neopakuje, zobrazí se jen jednou.

  div {
      background-image: url('logo.png');
      background-repeat: no-repeat;
  }

• background-position

  Definuje počáteční pozici obrázku pozadí. Můžeme použít klíčová slova (top, bottom, left, right, center) nebo hodnoty v px, % nebo em.

  div {
      background-image: url('ikona.png');
      background-repeat: no-repeat;
      background-position: center center; /* Obrázek uprostřed */
  }

• background-size

  Ovládá velikost obrázku pozadí. Užitečné hodnoty jsou:

  • auto: Výchozí velikost obrázku.
  • cover: Obrázek se roztáhne tak, aby pokryl celou plochu pozadí, přičemž může být oříznut.
  • contain: Obrázek se zmenší tak, aby se vešel do plochy pozadí, aniž by byl oříznut. Může se objevit prázdné místo.
  • Specifické rozměry (např. 200px 150px nebo 50% auto).

  body {
      background-image: url('velky-obrazek.jpg');
      background-size: cover;
      background-position: center;
  }

• background-attachment

  Určuje, zda se má obrázek pozadí posouvat s obsahem stránky, nebo zda má zůstat pevně fixován ve viewportu.

  • scroll: Obrázek se posouvá s obsahem (výchozí).
  • fixed: Obrázek zůstává na stejném místě ve viewportu, i když se stránka posouvá.
  • local: Obrázek se posouvá s obsahem elementu, i když je element posouvatelný.

  body {
      background-image: url('pozadi-fix.jpg');
      background-attachment: fixed;
  }

• Gradienty (linear-gradient, radial-gradient)

  CSS umožňuje vytvářet plynulé přechody mezi barvami bez použití obrázků. Nejběžnější jsou lineární a radiální gradienty.

  • linear-gradient(): Vytváří přechod podél přímky. Můžeme definovat směr a seznam barev.

    .gradient-box {
        background-image: linear-gradient(to right, red, orange, yellow);
        /* Přechod zleva doprava, z červené přes oranžovou do žluté */
    }
    .sikmy-gradient {
        background-image: linear-gradient(45deg, blue, purple);
        /* Přechod pod úhlem 45 stupňů */
    }

  • radial-gradient(): Vytváří přechod z jednoho bodu do kruhu nebo elipsy.

    .kruhovy-gradient {
        background-image: radial-gradient(circle, white, gray);
        /* Kruhový přechod z bílé do šedé */
    }

Zkrácený zápis pro pozadí (Shorthand background)

Můžeme kombinovat více vlastností pozadí do jednoho zkráceného zápisu background. Pořadí není striktní, ale běžně se používá: color image repeat attachment position / size.

.hero-section {
    background: url('hero.jpg') no-repeat center / cover;
    /* Obrázek, bez opakování, na středu, pokrývá celou plochu */
    background-color: #f0f0f0; /* Záložní barva */
}