• доступно о веб-разработке
19.10.2012 CSS, Технологии

Задний фон

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

Со временем вы перестаете обращать на него особое внимание, поэтому важно именно первое впечатление.

Как человека встречают по одежке, так и сайт встречают по его дизайну. После уже идет  содержимое и удобство использования.

Поэтому вам, уважаемые читатели, крайне важно научиться правильно использовать данное свойство листов стилей.

Задний фон бывает трех типов:

  • Цвет.
    Монотонно и скучно. Обычно — белый, легкий серый или черный.
  • Градиент.
    Перелив от одного цвета  к другому. Эффектно и быстро загружается.
  • Картинка.
    Самый красивый и оригинальный вариант, но на мобильном медленном интернете может грузиться дольше.

В принципе, сегодня Россия достигла того уровня скорости подключения к Интернету, что обогнала по соотношению цена/качество большинство даже самых развитых стран мира.

Например, я получаю скорость 60Мбит в обе стороны за скромные 300 рублей  в месяц. Раньше об этом можно было только мечтать.

Сайты — не видео, поэтому они сегодня грузятся просто «влёт». Даже с мобильника через 3G.

Вернемся к заднему фону или, как он называется в сайтостроении, бэкграунду (от англ. background — задний фон).

Каждый элемент отображаемой структуры страницы сайта может иметь свой фон.

К примеру, вот фон этого сайта:

Поняли секрет? На деле вы, управляя параметрами стиля конкретного элемента, можете масштабировать рисунок фона по горизонтали и/или вертикали. Что в данном случае и происходит.

Если вы, используя Google Chrome, наведете курсор мыши на наши деревянные обои, и нажмете правой кнопкой мыши, а во всплывающем окне выберете «Просмотр кода элемента», то увидите следующую картину.

Можно объяснять, начиная снизу, а я в этот раз начну сверху. Прямо разберем конкретный пример.

Что мы видим в панели стилей? Следующее правило.

body.custom-background {
background-color: white;
background-image: url('https://storage.yandexcloud.net/codemotion/uploads/2012/08/wood_pattern.png');
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}

Главный элемент страницы — её тело <body> — имеет одним из классов класс custom-background.

Да, это еще одно различие между id и class. Классов может быть множество, тогда как идентификатор — только один.

<div id="codemotion" class="good knowledge learn howto"></div>

Как видим, есть целый ряд параметров, которые задают задний фон:

  • background-color: цвет. Обычно задается в формате HEX вида #FFFFFF. Где после # идут шесть шеснадцатриричных цифр, которые вобрали в себя все множество цветовых оттенков.
  • background-image: путь к изображению. Можно указывать относительные и абсолютные пути (об этом в следующем уроке).
  • background-repeat:  повторение. Можно указать просто повторение, а можно — по одной из координат. Repeat-x или repeat-y.
  • background-position:  позиция. Как расположено фоновое изображение относительно начала сетки координат.
  • background-attachment: позиция фона. Он может либо прокручиваться вместе со страницей, либо быть статическим (сейчас редко кто так делает).
Что важно — можно все указать одним параметром:
body.custom-background {
    background: #FFFFFF url(../img/bg.jpg) scroll repeat top left;
}

Главное — соблюсти порядок указания значений.

Еще немного интересного по теме:

http://htmlbook.ru/css/background

Задание следующее.

Обойдите часто посещаемые вами сайты и посмотрите при помощи панели разработки их фоновые изображения.

 

Поделиться

Комментарии Правила дискуссии