tło, background

parametry:

  • background-color:#e22117;
  • background-image:url(bg_pic.png);
    • background-repeat:
      • repeat (default) – powiela obrazek horyzontalnie i wertykalnie
      • repeat-x – powiela obrazek horyzontalnie
      • repeat-y – powiela obrazek wertykalnie
      • no-repeat – bez powielania
      • space – tworzy przestrzeń pomiędzy powielanym tłem tak aby zawsze obrazki były wyświetlane jako całe bez przycinania
      • round – kompresuje wielkość obrazków tak by wypełniły całą przestrzeń, bez przerw ale również bez przycinania obrazka
    • background-size:
      • 100px 100px – (szerokość, wysokość) – rozciąga lub zwęża obrazek jeśli wymiar obrazka jest mniejszy/większy
      • 60% 60% – w stosunku do wielkości bloku
      • auto – zachowuje oryginalną wielkość tła
      • cover – automatycznie dopasowywane do wielkości okna, skaluje z zachowaniem proporcji boków do najmniejszych wartości tak by zakryć całe tło obrazkiem
      • contain – skaluje z zachowaniem proporcji boków do największych wartości
    • background-attachment:
      • fixed – zatrzymanie tła w miejscu
      • scroll (default) – obrazek tła przewijany razem z tekstem
    • background-position:
      • center
      • left
      • right
      • top
      • bottom
      • 100px 100px, 20% 20% – odległość od lewego górnego rogu
      • right 10px top – odległość od prawej strony 10px
    • background-clip:
      • padding-box – tło kończy się przed ramką
      • border-box – tło zajmuje przestrzeń pod ramką (default)
      • content-box – tło zajmuje przestrzeń tylko treści, nie wliczając padding’u i border’a

 

Wieloelementowe tło

pozwala na umieszczenie dowolnej ilości obrazków jako tło elementu wraz z określeniem parametrów wyświetlania dla każdego oddzielonych przecinkami.

#myBackground{
 background-image:url(images/mountain1.jpg), url(images/mountain2.jpg), url(images/mountain3.jpg);
 background-size:33% 33%;
 background-position:20% 5%, 50% 5%, 80% 5%;
 background-repeat:no-repeat;
}

W przypadku bloku mniejszego wysokością niż wysokość obrazka tła z zastosowaniem background-attachment:fixed da efekt 'przesuwania’

 

Zapis zbiorczy:

background: background-color background-image background-repeat background-position

#myBackground{
 background: #f2c909 url(images/mountain1.jpg) no-repeat 20px 20px;
}
#myBackground{
 background: $colorAccentMain url('../img/icon_calender.svg') no-repeat center center / 115px auto;
}