Настройка фона 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;

Любому элементу 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);
  • Направление градиента:
    • top 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 элемента.

Примечание

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

Статьи по теме CSS