Настройка фона CSS

CSS - Настройка фона
CSS Настройка фона
Селектор:	body; table; tr; th; div; #name
Свойство:	background; background-image: url(fon1.gif); background-position; background-size;
Значения:	red; white; blue и др., а также #F9FCBC; fon1.gif;
Портал Веб-разработчиков • • Портал CSS

Любому элементу 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);

На выходе получим такой результат:

Text in the block

В зависимости от своих задач по оформлению, вёрстки сайта можно менять следующие параметры:

• Тип градиента:
  • Линейный градиент - 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 - кодом цвета HTML
  • white, black - общепринятыми в HTML названиями цветов
  • Можно устанавливать любое количество цветов в градиенте и их распределение в процентном соотношении, например:

background: linear-gradient(to bottom, #b5bdc8 0%, #828c95 40%, #28343b 100%);

CSS тэги для оформления фона

• background - основной тэг, определяющий свойства фона того или иного HTML элемента (таблицы, блока div и т.д.)
• background-attachment
• background-clip
• background-color - определяет цвет фона HTML элемента.
• background-image - задаёт картинку или фотографию в качестве фона.
• background-origin
• background-position - позиционирование картинки или фотографии внутри какого-либо HTML элемента.
• background-repeat
• background-size - задаёт размеры картинки или фотографии внутри какого-либо HTML элемента.

Примечание

Если же есть какие-либо вопросы как установить фон к тому или иному элементу на странице, то можно задать вопрос и обсудить тему на странице обсуждения нашего форума.