Универсальное свойство background

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

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

background-color (color | transparent).
background-image (url | none).
background-position (значение).
background-size (auto | length | cover | contain).
background-repeat (repeat | repeat-x |repeat-y | no-repeat).
background-origin (padding-box | border-box | content-box).
background-clip (border-box | padding-box | content-box).
background-attachment (scroll | fixed | local).

Давайте рассмотрим пример использования универсального свойства background:

Пример использования универсального свойства background

И так, что мы сделали в этом примере:

Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

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

Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Прогрессивные усовершенствованиям и устаревшие браузеры

IE6 и IE7не поддерживают псевдо-элементы CSS 2.1 и игнорируют все объявления:before и:after . Они не будут выводить все усовершенствования, но сохранят основу функционирования.

Внимание при использовании Firefox 3.0

Firefox 3.0 поддерживает псевдо-элементы CSS 2.1, но не поддерживает их позиционирование. Из-за такой частичной поддержки эффекты, которые явно зависят от свойств псевдо-элементов width или height, могут выглядеть ужасно. Нет никакого альтернативного способа для Firefox 3.0, если вы использовали свойства width или height
. Иногда некоторые улучшения можно получить при добавлении display:block к стилям псевдо-элемента.

Прежде, чем использовать техники, которые требуют позиционирования псевдо-элементов с помощью свойств width или height, нужно рассмотреть, насколько важно обеспечивать поддержку Firefox 3.0, и процент ваших пользователей, которые используют данный браузер.

Данная проблема полностью решается в приложениях, которые используют абсолютное позиционирование, вместо свойств width или height.

Усовершенствования с помощью CSS3

Все примеры, которые реализованы в данной статье, могут быть улучшены с использованием CSS3.

Использование свойств border-radius , rgba , transforms и множественные фоны CSS3 в сочетании с псевдо-элементами могут открыть возможности для реализации более сложных эффектов. Однако, на текущий момент нет браузеров, которые поддерживают анимации или трансформации CSS3 для псевдо-элементов.

Полезные советы:

Работая одновременно с несколькими фонами CSS код можно формировать с помощью базового свойства background выглядеть это будет так:

body{background: url(«graphics/mammoth.gif») no-repeat center 100px, url(«graphics/fon1.gif») repeat-x 0px 250px, url(«graphics/fon.gif») repeat;}

— такая запись являться аналогом той, которую мы с Вами разобрали в примере выше:

body {background-image:url(graphics/mammoth.gif), url(graphics/fon1.gif), url(graphics/fon.gif);background-repeat: no-repeat, repeat-x, repeat;background-position: center 100px, 0px 250px;}

По-моему в первом случае CSS код выглядит более «элегантным» и понятным.

Background-size

Определяет размер фонового изображения.

div {
    background url(my-image.jpg);
    background-size 100% 100%;
    background-repeat no-repeat;
}

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

Фоновые изображения CSS не являются HTML изображениями

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

Фоновое изображение СSS помещается в существующий блок. К фоновому изображению СSS нельзя добавить поля, границу и подложку. Также фоновому изображению CSS нельзя задать ширину и высоту

Тег создает новый блок. Фоновое изображение СSS помещается в существующий блок. К фоновому изображению СSS нельзя добавить поля, границу и подложку. Также фоновому изображению CSS нельзя задать ширину и высоту.

Так как изображение в html – это новый блок (встроенный блок, то есть он обтекается другими элементами), у него есть ширина и высота, подложки и поля, а также граница. Более того, к тегу можно применить фоновое изображение CSS. Не знаю, как часто это применяется на практике, но по желанию за изображение можно добавить фоновое изображение.

background-image

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

Например, картинка background.png хранится в той же папке, что и веб-страница, и вы хотите установить её как фон параграфам этого HTML-документа. Код будет таким:

p { background-image: url(background.png); }

Для одного и того же веб-элемента можно установить несколько фоновых рисунков. Для этого достаточно перечислить их все в свойстве background-image через запятую:

Body { background-image: url(”image/background01.png”), url(”image/background02.png”), url(”image/background03.png”), url(”image/background04.png”); }

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

Как сделать фон на сайте html

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

При создании фона для сайта самое главное определиться с вопросом о том, будет ли сайт растягиваться на весь экран (резиновый дизайн) или будет фиксированной ширины. Конечно, лучше сделать так, чтобы дизайн сайта и в далеком будущем на больших разрешениях мониторов отображался также красиво, но с другой стороны, чтобы при этом сайт не был сильно растянут.

Лично я всегда выбираю такие шаблоны для сайта, чтобы ширина видимой части контента была не больше 1024 символов. Если посмотреть статистику сайта, то такое разрешение удовлетворяет большой процент пользователей. В будущем это число будет уменьшаться, т.к. новые мониторы с высоким разрешением вытесняют старые (например, full-hd есть почти у каждого).

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

Рассмотрим все варианты по заданию фона на сайте.

Несколько фоновых рисунков

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

Давайте рассмотрим пример, когда на веб-странице используется два вертикальных фона. Раньше для этой задачи фоновый рисунок добавлялся к селектору body и html , при этом ещё и надо установить высоту страницы 100%. Теперь гораздо проще, добавляем фоновые рисунки только к селектору body , как показано в примере 1.

Пример 1. Фон на веб-странице

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Веб-страница с двумя фоновыми картинками

Двойной фон не обязательно использовать исключительно с изображениями, это можно сделать и с градиентами. Разумеется, эффект будет заметен только при прозрачном или полупрозрачном цвете. В примере 2 применяется функция linear-gradient . Первый фон располагается под углом 45º и состоит из прозрачной и полупрозрачной зелёной полосы. Второй фон содержит те же самые цвета, но располагается под углом -45º. За счёт наложения одного фона на другой по центру веб-страницы появляется цепочка повёрнутых квадратиков.

Рисунок или фотография в качестве фона

Остановимся также и на возможностях языка гипертекста для такой задачи, как сделать изображение фоном в HTML. Существует 3 варианта установки картинок для фона страницы только с применением HTML + CSS (JS не используется).

Дарим скидку от 60% на обучение «Веб-разработчик» до 10 сентября

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

Но сперва определим основные требования к фоновой картинке:

Изображение должно покрывать всю ширину и высоту страницы сайта.
В случае необходимости фон может масштабироваться (background растягивается/сжимается с учетом параметров экрана).
Пропорции изображения сохраняются (aspect ratio).
Картинка центрируется на странице.
Фоновой изображение не вызывает скроллов.
Решение полностью кроссбраузерное.
Не применяются разные технологии, только CSS

Установка однотонного заднего фона с помощью html

Метод 1

Наиболее простой и прогрессивный способ, как сделать фото фоном в HTML. В этом случае используется свойство CSS3 background-size, в применении к тегу html. Тег body не применяется, потому что он имеет большую высоту, которая определяется высотой окна браузера. Вначале нужно установить центрированную и фиксированную картинку фона, а потом изменить ее размер с помощью background-size: cover.

html {

background-image: url(images/background.jpg);

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

Copy

Для вас подарок! В свободном доступе до
10.09

Скачайте ТОП-10 бесплатных нейросетей
для программирования

Помогут писать код быстрее на 25%

Чтобы получить подарок, заполните информацию в открывшемся окне

Перейти

Скачать
файл

Этот способ можно использовать в любой версии Chrome, Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Метод 2

В этом варианте применяется элемента img. Его размер можно изменить с учетом размеров браузера. Для растягивания картинки фона на полный экран следует задать для фона min-height и width с параметром 100%.

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

Copy

img.background {

min-height: 100%;

min-width: 640px;

width: 100%;

height: auto;

position: fixed;

top: 0;

left: 0;

/* Определяется размером картинки */

@media screen and (max-width: 640px){

img.bg {

left: 50%;

margin-left: -320px;

}

Метод 3

Еще один способ, как сделать изображение фоном в HTML. Нужно закрепить изображение <img /> на странице вверху слева и растянуть его, используя свойство min-width и min-height 100% (необходимо сохранить соотношение сторон).

Отметим, что при таком решении изображение не центрируется. Чтобы центрировать картинку ее нужно завернуть в <div />, сделав его в 2 раза большим, чем размеры окна. При этом, саму картинку растягиваем и устанавливаем по центру.

</div>

Copy

div.background {

position: fixed;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

}

img {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

min-width: 50%;

min-height: 50%;

}

Данный метод также может использоваться в хороших браузерах и IE 8+.

Несколько фоновых картинок

К одному элементу можно добавить сразу несколько фоновых изображений через единственное свойство background . Это позволяет обойтись одним элементом для создания сложного фона или одной картинкой, выводя её несколько раз с различными настройками. Все изображения со своими параметрами перечисляются через запятую, при этом вначале указывается картинка которая выводится поверх остальных изображений, а последней, соответственно, самая нижняя картинка. В примере 1 показано создание фона с тремя изображениями.

Пример 1. Три фона

Если требуется отдельно задать какое-то стилевое свойство для фона, вроде background-size как в примере выше, то параметры для каждого фона перечисляются через запятую. Результат данного примера показан на рис. 1.

Рис. 1. Фон с тремя изображениями

Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.

Пример 2. Анимированный фон

Подробнее про анимацию рассказывается далее.

Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.

Рис. 2. Рисованная рамка

На рисунке хорошо заметна верхняя и нижняя часть, которую требуется вырезать в графическом редакторе и расположить по горизонтали. Средняя часть выбирается таким образом, чтобы она повторялась без швов по вертикали. Картинка имеет выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. В итоге получится такое подготовленное изображение (рис. 3). Клетчатое поле обозначает прозрачность, оно позволяет задавать наряду с изображениями цветной фон и легко менять его через стили.

Рис. 3. Подготовленное для фона изображение

Сам фон выводится свойством background , оно же задаёт и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую и в данном случае имеет значение их порядок. Нам требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми (пример 3). Цвет фона указывается последним.

Пример 3. Несколько фоновых картинок

Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы. Последним идёт цвет, который виден в прозрачной центральной части блока (рис. 4).

Позиционирование фонового рисунка

Указать начальное положение фонового рисунка позволяет свойство , которое появилось в стандарте CSS1 (). Свойство может применяться только к блочным элементам и не наследуется потомками.

Примечание: Начальное положение рисунка — это положение, в котором рисунок будет находиться при отключенном повторении, и, самое главное, это положение, откуда начнётся повторение, если его включить. Другими словами, от этого положения зависит то, с какой стороны будут обрезаться неубирающиеся фрагменты фоновой картинки в режиме .

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

Если положение задаётся с помощью двух значений в процентах, пикселах или других CSS-единицах, то первое из этих значений будет определять смещение начального положения рисунка по горизонтали, второе — его смещение по вертикали, например:

Примечание: Расчёт смещения в процентах несколько отличается от расчета смещения в пикселах и других единицах длины.

Если при указании начального положения картинка используется ключевое слово, то назначение второго значения будет определяться этим ключевым словом. Порядок следования значений в этом случае не важен. Если в свойстве, например, используется слово (соответствует смещению 0% по горизонтали), то второе значение, независимо от того, где оно записано, будет определять смещение по вертикали.

Соотношение между используемыми ключевыми словами и процентной записью следующее:

(позиция в левом верхнем углу; является начальным положением по умолчанию);
(позиция по центру вверху);
(позиция в правом верхнем углу);
(позиция по левому краю и по центру);
(позиция по центру);
(позиция по правому краю и по центру);
(позиция в левом нижнем углу);
(позиция по центру внизу);
(позиция в правом нижнем углу).

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

Пример использования свойства :

<!DOCTYPE html>
<html>
<head>
   <title>Example</title>
   <style>
      body {
         
         background-image: url('images/bg.jpg');
         
         background-color: #c7b39b;
         
         background-repeat: repeat-y;
         
         background-position: 20px 0;
         padding-left: 20px;
      }
   </style>
</head>
<body>
   <h1>Lorem ipsum dolor</h1>
   <p> Lorem ipsum dolor sit
   amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam
   erat volutpat.</p>
   <p> Duis te feugifacilisi. Duis autem dolor
   in hendrerit in vulputate velit esse molestie consequat,
   vel illum.</p>
</body>
</html>

Результат в браузере:

Заключение

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

Важно помнить, фоны CSS не создают новых блоков. Они наполняют только существующие html-блоки

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

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