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;
}