CSS Background. Полное руководство

31.10.2011

CSS background

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

CSS3 привнес немало нового в свойство, это и прозрачность, и назначение нескольких изображений в качестве фона, но об этом мы поговорим ниже, а для начала рассмотрим основы свойства background.

background-color

Я более чем уверен — вы уже неоднократно делали назначение цвета фона. Сделать это можно используя несколько видов записи: обычную(используется название цвета), шестнадцатиричную или RGB-запись. Каждый тип равнозначен, используйте какой больше нравится. Я стараюсь использовать наиболее короткий вариант, и для восприятия попроще и файл стилей чуть поменьше получается размером.

p {background-color: red;}
p {background-color: #f00;}
p {background-color: #ff0000;}
p {background-color: rgb(255, 0, 0;)}

В CSS3 внедрена поддержка прозрачности, поэтому можно и ее добавить к нашему цвету, например так:

p {background-color: rgba(255, 0, 0, 0.5);}

Последней цифрой установили прозрачность в 50%. Можно установить значение прозрачности от 0 (полностью прозрачный фон) до 1 (полностью непрозрачный).

background-image

Это свойство тоже используется очень часто, позволяет присваивать фону изображение. В CSS3 добавлена возможность присваивать фону несколько изображений, причем каждое создает своеобразный слой, поэтому каждое последующее накладывается на предыдущее. Зачем это может пригодиться? Все достаточно просто — допустим, нужно прикрутить рюшечки в каждом из углов сайта. При условии более-менее резиновой верстки использовать одно изображение — не вариант. Поэтому делаем 4 «слоя», каждое изображение двигаем в свой угол и на этом все, задача решена

body {background-image: url("image1"), url("image2"), url("image3")}

Если нужно назначить одно изображение на фон — в коде оставляем только первое, думаю, это понятно.
Используя любые изображения в качестве фона следует помнить два правила:

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

Поддержка нескольких изображений для фона достаточно широка. Все браузеры, даже IE8, поддерживают это свойство.

background-repeat

C точки зрения технической оптимизации — очень полезное свойство . Позволяет размножить одну маленькую картинку на большую площадь. При этом, картинка должна быть бесшовной, чтобы не было видно границ. Может принимать 6 различных значений, 4 из которых я раньше использовал, а вот два последних стали для меня открытием.

Итак, подробнее:

  • no-repeat. Картинка не повторяется, все просто
  • repeat-x. Повторяется только по горизонтали
  • repeat-y. Только по вертикали
  • repeat. Как по горизонтали, так и по вертикали.
  • space. Все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются
  • round. Аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения

Возьмем пример из предыдущего раздела, с несколькими изображениями и применим заполнение:

body {
background-repeat: no-repeat, repeat-y, space;
}

Первое не будет повторяться, второе будет, но только по вертикали и третье заполнит всю доступную область.

background-attachment

Свойство определяет, как будет вести себя фон при изменении области просмотра. Самый яркий пример — будет ли он сдвигаться при прокрутке? Честно говоря, считаю его бесполезным, не припомню, чтобы когда-либо применял подобный эффект, но некоторым нравится.

Может быть присвоено три значения:

  • fixed. Изображение не прокручивается
  • local. Изображение прокручивается с контентом, но не с элементом, его содержащим.
  • scroll. Изображение прокручивается с элементом, его содержащим.

background-position

А вот одно из самых важных свойств. Определяет, где конкретно будет расположен фон. По умолчанию, он располагается в верхнем левом углу окна браузера. Можно устанавливать положение по горизонтали, вертикали или по обеим сторонам. В случае горизонтали это центр, слева и справа (center, left,right), вертикаль это центр, сверху и снизу (center, top, bottom). Также прекрасно распознаются значения в процентах или пикселах, например так:

body {
background-position: right 20px;
}

Эта запись означает, что фон будет располагаться справа и на 20px смещен вниз. Когда используется два значения — первое обозначает горизонтальное расположение, а второе — вертикальное. Когда только одно значение — второе по умолчанию будет в центре.

При процентной записи — отсчет идет из верхнего левого угла. Например, такая запись:

body {
background-position: bottom 10px right 20%;
}

переместит фон на 10px от нижнего края и на 20% от правого.

background-clip

Свойство появилось с приходом CSS3, поддерживается хорошо. Все браузеры, кроме IE8 и ниже — замечательно с ним работают. Свойство определяет, как фоновая заливка или изображение должны отображаться под границами элемента. Эффект заметен только в случае полупрозрачных или пунктирных границ, показано на иллюстрации (взял на htmlbook.ru, очень уж удачная)

Итак, три типа значения, на картинке наглядно видна разница:

  • padding-box. Фон будет отображаться без учета границы
  • border-box. Фон на весь размер блока
  • content-box. Фон без учета границы и отступа.

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

background-origin

Свойство практически полностью аналогично предыдущему, с той разницей, что оно обозначает, как будет расположен фон. Значения аналогичны предыдущему. И небольшое уточнение — если свойство background-attachment имеет значение fixed — тогда это свойство работать не будет.

background-size

Хотя фон может быть любого размера, вы можете контролировать его размер на своей странице, как горизонтальный, так и вертикальный.

Значения могут быть как в процентной записи, так и в пикселах. Первое — горизонтальный размер, второе — вертикальный. Отрицательные значения не допускаются, имейте ввиду.

body {
background-size: 500px 50%;
}

Если указано только одно значение — второе считается по умолчанию (auto или 100%, если это возможно).

Также, можно указать еще два значения, которые будут регулировать размер фонового изображения:

  • contain. Масштабирует изображение, сохраняя пропорции, по длинной стороне, для максимального заполнения
  • cover. Тоже самое, но масштабирует по короткой стороне.

Сокращенная запись

Независимо от того, в каком порядке указаны свойства в краткой записи, работать они будут. Но это не валидно (код будет неправильным с точки зрения стандартов), W3C рекомендует применять такой порядок:

body {
background-image: url("image.png");
background-position: top left;
background-size: 95% 95%;
background-repeat: no-repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: content-box;
background-color: #333};
}

Или краткий вариант записи:

body {background: url("image.png") top left / 95% 95% no-repeat scroll padding-box content-box #333;}

Они идентичны, но второй вариант занимает намного меньше места и грузится быстрее.

Вот и все, что я хотел рассказать про CSS background. При написании использовалась статья товарища Van SEO Design. Если остались вопросы — задавайте в комментариях, расскажу подробнее. Ну и не забывайте подписываться на обновления блога

Удачного дня

follow us in feedly

, ,

Комментариев: 21

  1. Куб

    >но второй вариант занимает **намного** меньше места и грузится быстрее
    разве что при забытом dial-up’е 56k

    Ответить
  2. steam

    Все я решил проблемму сам
    Прописал в место того, что находиться в /* Top BG */
    body { background: #000 url(«../images/34r69.jpg») 50% 0 no-repeat fixed; -webkit-background-size: 2400px 1332px; color: #efc9a0; font: normal 12px/1.5 Arial, Verdana, sans-serif; }

    Ответить
  3. GerinG
    background:url(../images/34r69.jpg) no-repeat;

    У вас бэкграунд и будет «уезжать», установлен режим без повторений

    Ответить
  4. steam

    Народ привет! Я тока начинаю учиться делать сайты и вот есть вопросик по CSS
    В шаблоне для DLE каторый я скачал, написанно следующее:
    }
    /* Body */
    body {
    background-color:#06070b;
    font-family:Arial;
    font-size:12px;
    }
    /* Top BG */
    .topbg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(../images/34r69.jpg) no-repeat;
    z-index:1;
    }
    Бэкграунд не повторяется и не двигается, это гуд, но при изменении маштаба страници (Допустим в опере, бегунок справа внизу) сайт остается по центру и картинка убегает в левый верхний угол. Я пытался сделать, по примерам которые написанны у вас, но чото у меня ничего не получается…

    Ответить
  5. Serdesh77

    «4 «слоя», каждое изображение двигаем в свой угол и на этом все, задача решена
    ?
    1body {background-image: url(«image1»), url(«image2»), url(«image3″)}»
    как каждое изображение подвинуть в свой угол?

    Ответить
  6. Riffle1

    Кстати свойство background-position в сочетании с hover/active позволяет делать замечательные кнопочки с эффектом нажатия-полунажатия. И вообще SCC в некоторых случаях может вполне заменить javascriptы

    Ответить
  7. Александр Багров

    background-image — это не селектор, а атрибут

    Ответить
      • Александр Багров

        Свойство — это атрибут + значение этого атрибута.
        background-image  без значения — это атрибут.
        Кстати, атрибут в переводе с английского языка:
        атрибутпризнакопределениехарактерная чертахарактерный признаксвойство

        Ответить
  8. akkad

    background-size, я так понял, работает только если задан background-image. а если background-color — о нет. кстати подсветка синтаксиса не распознаёт некоторые эти свойства.

    Ответить
    • Виктор Милашечкин

      Да, все верно. Размер цвета задавать бессмысленно.
      А подсветка синтаксиса может не работать потому, что некоторые селекторы — из спецификации CSS3, которую не все редакторы понимают. Я рекомендую Notepad++

      Ответить