СТИЛІЗАЦІЯ ФОНУ CSS
Способи задання фону
1. В тегу цільового об'єкта:
<div style="background-color : #E6E6FA;"></div>
2. В тегу style у файлі даної вебсторінки:
<header> <style> body{ background-color : #E6E6FA; } </style> </header>
3. В окремому файлі (style.css):
body{ background-color : #E6E6FA; }
Потім цей файл потрібно правильно імпортувати у файл сторінки:
<header> <link rel="stylesheet" type="text/css" href="style.css"> </header>
Стилі можна задавати як до об'єктів html загалом (body, div, a), так і для класів (.class1{}) та id(#id1{}), присвоєних окремим об'єктам, а також для різних станів об'єктів (наприклад a{} та a:hover{} - вигляд посилань загалом та посилань при наведенні курсором на них)
Параметри фону

background-color : #E6E6FA;

background-image : url(img.jpg);

background-image: url(img.jpg);
opacity: 0.6;

background-image : url(img/fl.jpg); background-size: 100%;

background-image : url(img/fl.jpg); background-position: bottom right;

background-image : url(img/fl.jpg); background-position: top center;

background-image : url(img/fl.jpg); background-position: top left;

background-image : url(img/fl.jpg); background-position: center center;

background-image : url(img/fl.jpg); background-repeat: repeat-y;

background-image : url(img/fl.jpg); background-repeat: repeat-x;

background-image : url(img/fl.jpg); background-repeat: repeat;

background-image : url(img/fl.jpg); background-repeat: no-repeat;

background-image : url(img/fl.jpg); background-attachment: scroll;
прокручує фон разом зі вмістом сторінки
*так працює відносно сторінки
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

background-image : url(img/fl.jpg); background-attachment: local;
прокручує фон разом із вмістом об'єкту
-
-
-
-
-
-
-
-
-
-
-
-
-
-

background-image : url(img/fl.jpg); background-attachment: fixed;
забороняє прокручування фону
-
-
-
-
-
-
-
-
-
-
-
-
-
-

background-image : url(img/fl.jpg); background-attachment: initial;
повертає цю властивість до значення за замовчуванням
-
-
-
-
-
-
-
-
-
-
-
-
-
-

background-image : url(img/fl.jpg); background-attachment: inherit;
наслідує цю властивість від батьківського елементу
-
-
-
-
-
-
-
-
-
-
-
-
-
-
background-image:
linear-gradient(to left, black,
red);
background-image:
linear-gradient(to top left,
black, red, white);
background-image:
linear-gradient(65deg, black,
red, yellow);
background-image:
linear-gradient(to right bottom,
yellow 10%, white, red, black 90%);
background-image:
linear-gradient(to right,
black 10%, yellow, black 90%);
background-image:
linear-gradient(to left,
rgb(255,255,0),
rgba(255,255,0,0));
background-image:
radial-gradient(cyan, yellow,
indigo, white);
background-image:
radial-gradient(cyan,
yellow 10%, indigo 30%, white 50%);
background-image:
radial-gradient(ellipse, cyan,
indigo);
background-image:
radial-gradient(circle, cyan,
indigo);
background-image:
radial-gradient(circle at 300px
50px, cyan, indigo, yellow);
background-image:
radial-gradient(circle at top
left, cyan, indigo, yellow);
background-image:
radial-gradient(circle closest-side,
cyan, red, blue);
closest-side - розмір градієнту залежить від відстані між центом градієнту і найбилжчої сторони об'єкта
background-image:
radial-gradient(circle
closest-corner, cyan, red, blue);
closest-corner - розмір градієнту залежить від відстані між центом градієнту і найближчого кута об'єкта;
background-image:
radial-gradient(circle
farthest-side, cyan, red, blue);
farthest-side - розмір градієнту залежить від відстані між центом градієнту і найдальшої сторони
background-image:
radial-gradient(circle
farthest-corner, cyan, red, blue);
farthest-corner - розмір градієнту залежить від відстані між центом градієнту і найдальшого кута об'єкту