(C) Tło CSS*

Tło CSS

Background

• background-color: Kolor; – Okresla kolor tła wskazanego obiektu HTML.
• background-image: Opcje; – Wstawia zdjęcie jako tło wskazanego obiektu HTML.
  • url() – Wstawia zdjęcie jako tło wskazanego obiektu HTML.
  • linear-gradient(Kolor-1, Kolor-2) – Wstawia liniowy gradient jako tło wskazanego obiektu HTML.
  • repeating-linear-gradient(Kolor-1 Procent, Kolor-2 Procent, Kolor-n Procent) – Wstawia liniowy, wielowarstwowy gradient jako tło wskazanego obiektu HTML.
  • radial-gradient(Kolor-1, Kolor-2) – Wstawia kulisty gradient jako tło wskazanego obiektu HTML.
  • repeating-radial-gradient(Kolor-1 Procent, Kolor-2 Procent, Kolor-n Procent) – Wstawia kulisty, wielowarstwowy gradient jako tło wskazanego obiektu HTML.
• background-clip: Opcja; – Określa pozycje początkową pozycje od której wyliczane jest pozycjonowanie tła.
  • padding-box – Tło nie nachodzi na margines ani obramowanie.
  • border-box – Tło nie nachodzi na margines.
  • content-box – Tło nie nachodzi na margines, obramowanie ani padding.
• background-repeat: Opcje; – Określa czy obrazek umieszczony jako tło obiektu HTML, ma być powielany.
  • repeat – Powiela obrazek w osi X oraz osi Y.
  • repeat-x – Powiela obrazek w osi X.
  • repeat-y – Powiela obrazek w osi Y.
  • no-repeat – Nie powiela obrazka.
  • round – Powiela obrazek w osi X oraz Y (Dopasowując obrazek tak aby wypełniał cały obiekt).
  • space – Powiela obrazek w osi X oraz Y (Wykorzystując przerwy pomiędzy obrazkami, tak aby wypełniał on cały obiekt).
• background-attachment: Opcja; – Określa obszar, do którego zostanie zaczepiony obrazek.
  • scroll – Obrazek zostaje zaczepiony do obszaru tła obiektu HTML.
  • fixed – Obrazek zostaje zaczepiony do obszaru tła okna przeglądarki.
  • local – Obrazek zostaje zaczepiony do zawartości danego obiektu.
• background-position: Pozycja; – Określa pozycję startową obrazka względem obiektu HTML (Np. „left”, „right top”, „30px -120px”, „30% 10%” czy „right 15px top 30px”).
• background-orgin: Opcja; – Określa pozycje początkową pozycje od której wyliczane jest pozycjonowanie obrazka.
  • padding-box – Obrazek nie nachodzi na margines ani obramowanie.
  • border-box – Obrazek nie nachodzi na margines.
  • content-box – Obrazek nie nachodzi na margines, obramowanie ani padding.
• background-size: Opcja; – Określa rozmiar obazka wypełniającego obiekt HTML.
  • auto – Wyświetla obrazek w domyślnych wymiarach.
  • cover – Skaluje obrazek w poziomie, aby wypełniał cały obiekt HTML.
  • contain – Skaluje obrazek w pionie, aby wypełniał cały obiekt HTML.
  • Roziar-X Rozmiar-Y – Określa dokłade wymiary obrazka.
• box-shadow: Rozmiar-X Rozmiar-Y Rozmiar-rozmycia Rozmiar-rozpiętości Kolor; – Określa cienie tła (Instnieje możliwość określenia wielu cieni po przecinku).

Pozostałe tematy związane z CSS

Kaskadowe arkusze stylów

• Custom Properties CSS
• Selektory CSS
• Jednostki CSS
• Dekoracja tekstu
• Rozmiary CSS
• Marginesy CSS
• Obramowanie CSS
• Przepełnienie CSS
• Tło CSS
• Układ Flex CSS
• Układ Grid CSS
• Border radius / Box schadow
• Listy, tabele CSS
• Kolumny CSS
• Reset CSS

Inspiracje CSS

• Glassmorphism CSS