Настройка фона CSS
CSS - Настройка фона
| |
 | |
| Селектор: | body; table; tr; th; div; #name |
| Свойство: | background; background-image: url(fon1.gif); background-position; background-size; |
| Значения: | red; white; blue и др., а также #F9FCBC; fon1.gif; |
Любому элементу HTML: div блоку - <div>, таблицe - <table> или же ячейку в таблице, то через CSS можно задать цвет фона, а также в качестве фона можно установить ту или иную картинку, рисунок.
Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.
Цвет фона блока CSS
Цвет задаётся через синтаксис "background" - переводится, как "фон" и наименование самого цвета - либо просто английскими словами (gray - серый, white - белый и так далее) или цифровым значением, например #F9FCBC. Добавим к двум блокам разные значения цвета фона:
#name {background: gray;}
#name {background: #F9FCBC;}
Получаем:
Цвет фона всей страницы
Таким же образом можно задать цвет фона страниц всего сайта, делается это так:
body {background: gray;}
В этом примере все страницы сайта, которые подключены к общему css файлу станут серым цветом.
Картинка в качестве фона
Чтобы установить картинку в качестве фона, необходимо применить к элементу следующий css код:
#name {
background-image: url(fon1.gif);
}
где:
#name- название элемента(image.gif)- адрес расположенного рисунка в интернете, он также может указываться полностью, например: http://www.wikijournal.ru/myimages/picture.jpg
Ко всему прочему можно задавать настройки к фону, например:
#name {
background-image: url(fon1.gif);
position: fixed;
bottom: 0;
right: 0;
}
где значение "position" указывает на тип метода позиционирования, используемого для элемента (static, relative, fixed or absolute)
static- статичное,fixed- зафиксированное,absolute- абсолютное значение,relative- относительное,
Градиент в качестве фона
Средствами CSS можно сделать фон блока, таблицы, ячейки или всей страницы градиентом, настроить цветовую палитру, размер и задать направление. Сделать это можно следующим способом:
background: linear-gradient(to top, #efefef, #fff);
На выходе получим такой результат:
В зависимости от своих задач по оформлению, вёрстки сайта можно менять следующие параметры:
- Тип градиента:
- Линейный градиент -
linear-gradient - Радиальный градиент -
radial-gradient. Радиальный градиент может иметь следующие параметры:- Тип градиента: круг (
circle) и эллипс (ellipse) и центральную точку градиента, например:
- Тип градиента: круг (
- Линейный градиент -
radial-gradient(circle at 70px 30px, #f9eec7, #ffb60f, #ffb60f);
- Направление градиента:
to top- градиент снизу вверхto bottom- градиент сверху внизto left- градиент справа налевоto right- градиент слева направоto top left- градиент к верхнему левому углуto top right- градиент к верхнему правому углуto bottom left- градиент к нижнему левому углуto bottom right- градиент к нижнему правому углу45deg- устанавливается наклон в градусах
- Цвет градиента, а именно начальное и конечное значение:
#efefef,#ffffff- кодом цвета HTMLwhite,black- общепринятыми в HTML названиями цветов- Можно устанавливать любое количество цветов в градиенте и их распределение в процентном соотношении, например:
background: linear-gradient(to bottom, #b5bdc8 0%, #828c95 40%, #28343b 100%);
CSS тэги для оформления фона
background- основной тэг, определяющий свойства фона того или иного HTML элемента (таблицы, блока div и т.д.)background-attachmentbackground-clipbackground-color- определяет цвет фона HTML элемента.background-image- задаёт картинку или фотографию в качестве фона.background-originbackground-position- позиционирование картинки или фотографии внутри какого-либо HTML элемента.background-repeatbackground-size- задаёт размеры картинки или фотографии внутри какого-либо HTML элемента.
Примечание
Если же есть какие-либо вопросы как установить фон к тому или иному элементу на странице, то можно задать вопрос и обсудить тему на странице обсуждения нашего форума.
