0507:

background:

• background-image: url('sciezka-do-pliku'); dodaje tło strony

.page{
  background-image: url('./dog-image.jpg');
}

• background-position: pozycja zdjęcia w tle

0	0
< pozycja-y>	< pozycja-x>
top	right
bottom	left
center	center
xx%	xx%
xxpx	xxpx
…	…

• background-repeat: powtarzanie tła
  • repeat
  • repeat-x powtarzanie tylko po osi x
  • repeat-y powtarzanie tylko po osi y
  • no-repeat tylko jeden raz
  • round otacza element pod którym jest tło
  • space nie przycina obrazka, powtarzany jest tak aby się mieścić jeśli się nie mieści to zostaje puste miejsce
• background-attachment:
  • scroll tło scrolluje się razem ze scrollem
  • fixed przyklejone, jest nieruchome
  • local tło scrolluje się razem z treścią (która jest overflow)

.content{
  background-image: url('./dog-image.jpg');
  background-attachment: local;
  height: 100px;
  overflow: scroll;
}

• background-origin: w którym miejscu powinno się zaczynać tło
  • padding-box
  • border-box
  • content-box
• background-clip: w którym miejscu tło powinno być cięte
  • border-box
  • padding-box
  • content-box

.content{
  background-image: url('./dog-image.jpg');
  color: white;
  padding: 30px;
  background-clip: content-box;
}

• background-color: wartość koloru
  • rgb(255,255,255,0.4): r,g,b, przeźroczystość
• background-size: jak ma się zachowywać tło, jak ma być duże
  • auto
  • cover zawsze będzie wypełniał całą stronę
  • contain zawsze będzie cały
  • <width> <height> przeskalowany według podanych jednostek

Gradienty

background:
  url(sweettexture.jpg) /* image */
  top center / 200px 200px /* position / size */
  no-repeat /* repeat */
  fixed /* attachment */
  padding-box /* origin */
  content-box /* clip */
  red; /* color */