4 подхода к созданию фона HTML страницы

Старое доброе свойство CSS - background является основным элементом, при помощи которого мы можем управлять фоном при создании дизайна сайта.

В данном уроке мы разберем 4 наиболее распространенных подхода к созданию фона HTML страницы.

Если вы новичок в веб дизайне, вы найдете для себя несколько основных методов работы с CSS, которые в дальнейшем сможете применить на практике при создании своего сайта.

1. Однотонный цвет фона HTML страницы.

body {
 background-color: #a1bad1;
 }

Это самый простой способ задать фон HTML странице, при помощи тега BODY. В данном случае для создания фона не используется никаких изображений, цвет фона задается при помощи значения: #a1bad1.

2. Горизонтально и вертикально повторяющееся изображение в качестве фона страницы.

body {
 background-color: #a1bad1;
 background-image: url(images/pattern.png);
 }

В качестве изображений для такого фона, могут использоваться различные текстуры от простых и тонких линий, до изображений содержащих сложные узоры. По умолчанию фоновое изображение будет повторяться в обоих направлениях, по оси X и Y, поэтому нет необходимости указывать это в CSS.

Здесь необходимо правильно сделать изображение, которое будет использоваться в качестве фона. Изображение нужно вырезать так чтобы в местах прикосновения одного изображения к другому не было видно шва. Иначе в местах прикосновения изображений вы увидите уродливые линии, которые буду портить весь фон.

Несмотря на то, что в качестве фона используется фоновое изображение, все равно установите HTML цвет фона веб страницы,  таким образом, как мы это делали в первом примере. Это обеспечит фон, если у посетителя, зашедшего на сайт, в браузере будут отключены изображения.

3. Фоновое изображение повторяющееся по горизонтали.

body {
 background-color: #a1bad1;
 background-image: url(images/gradient.jpg);
 background-repeat: repeat-x;
 }

Фоновое изображение в CSS может повторяться только по оси X или только по оси Y. Значение repeat-x обычно используется, чтобы добавить градиент к различным элементам, особенно часто применяется для элементов, используемых в качестве кнопки. Изображение градиента, вырезанное тонкой полоской, может использоваться в качестве фонового изображения, которое повторяется по горизонтали на всю страницу.

По умолчанию изображение будет располагаться в верхней части страницы, но значения center или bottom так же могут использоваться. Цвет фона страницы должен быть установлен таким как последний цвет изображения градиента. Это обеспечит плавный переход, от градиента в том месте страницы, где изображение, используемое в качестве фона, заканчивается и начинается цвет фона страницы.

4. Большая картинка в качестве фона страницы.

body {
 background-color: #a1bad1;
 background-image: url(images/bg-image.jpg);
 background-position: center top;
 background-repeat: no-repeat;
 }

Файлы изображений использующихся для создания подобного фона должны быть небольшими по размеру. Хотя размер файла большого фонового изображения будет выше, чем маленьких повторяющихся изображений, применив к нему сжатие можно значительно уменьшить размер изображения. Какими бы большими не были фоновые изображения, при прокрутке страницы они в определенный момент заканчиваются. Поэтому необходимо задавать цвет фона страницы, чтобы сделать плавные переход, от фонового изображения к цвету фона. В этом примере используется большое изображение, которое позиционируется по центру в верхней части веб-старницы.

Материал подготовлен сайтом: WebMasterMix.ru
Источник