Фон (background)

Фон можна задавати одним комплексним стилем, або окремими стилями, що змнюють складові фону.

Якщо в блока немає фонового зображення - фон потрібно задавати комплексним стилем.

Якщо в блока вже є фонове зображення - можна застосовувати окремі стилі для зміни складових фону. Приклад у jsFiddle.


				background: #f00 url(../images/background.png) repeat left top;

				background: url(../images/background.png) repeat left top;


				background: #f00;

				background-color: #f00;

				background-image: url(../images/background.png);

				background-repeat: repeat;

				background-position: left top;

Youtube: HTML Шорти - Скорочені властивості (3:20).

Можна використати декілька фонів одночасно, записавши їх через кому. Фони накладуються починаючи з кінця, останній фон буде з самого низу.


				background:

				  url(../images/item.png) no-repeat left center,

				  url(../images/corner.png) no-repeat right bottom,

				  url(../images/bg.png) repeat center center;

Можна змінювати розмір фона, розтягувати його, приклад у jsFiddle.


				background-size: auto;    /* значення по-замовчуванню */

				background-size: cover;    /* покрити блок фоном */

				background-size: contain;    /* вмістити фон в блок */

				background-size: 100px;

				background-size: 100px 300px;

				background-size: 100px auto;

				background-size: 50%;

				background-size: 50% 220%;

В 2014 році з'явилась можливість розміщувати контент по розміру блока: object-fit.