Фоновые изображения.

CSS-фон — свойства, добавляющие фон для любого HTML-элемента. Каждый элемент имеет фоновый слой, который может быть прозрачным (по умолчанию), цветной заливкой и изображением. В качестве изображения может выступать градиент или картинка. Для одного элемента можно задать несколько фоновых изображений.

Фон не отображается у пустых элементов с нулевой высотой. Свойства фона не наследуются, но фон родительского блока всегда будет виден.

Свойство background объединяет все свойства фона:

body {
   background: white url(http://www.it-black.ru/images/bg.gif) no-repeat top right;
}

Здесь объединяются следующие свойства:

  • background-color – фоновый цвет.
  • background-image – месторасположение файла изображения.
  • background-repeat – определяет шаблон мозаичного размещения фонового изображения. Может иметь следующие значения: repeat (выкладывает изображение мозаикой по всему фону элемента), repeat-y (изображение повторяется в вертикальном направлении), repeat-x (изображение повторяется в горизонтальном направлении), no-repeat (будет отображаться только один экземпляр изображения).
  • background-position – определяет положение фонового изображения. Может иметь значение top, center, bottom, left, right, либо процентные значения, либо сочетание этих значений.

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

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: