background
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Синтаксис
background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit= [background-attachment || background-image || background-position || background-repeat] | inherit
= [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.
XHTML 1.0 CSS2.1 IE Cr Op Sa Fx
Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat. Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
HTML5 CSS3 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.backgroundБраузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Css background about blank
Хотел бы ещё затронуть такую тему, как фоновое изображение страницы, и динамическое изменение его параметров, в зависимости от разрешения экрана пользователя.
- изображение должно полностью заполнять фон страницы, независимо от разрешения экрана;
- должно, по возможности, сохранять пропорции (соотношение сторон);
- изображение НЕ должно вызывать скроллинга (полос прокрутки);
Изменение фонового изображения страницы с помощью CSS3-свойства «background-size»
С приходом CSS3 появилось такое свойство, как «background-size», непосредственно отвечающее за масштабирование фона. Многие современные браузеры стремятся соответствовать стандарту W3C и уже поддерживают это свойство.
К ним относится: Opera 9.5 и выше, Firefox 4 и выше,Safari 3 и выше, Chrome 4 и выше, Konqueror 3.5.4 , и, как ни странно, лидер неподдержки стандартов — Internet Explorer 9.
Все они уже поддерживают CSS3 свойство «background-size», но, как и обычно, коряво, и для разных браузеров, по своему: через -moz-background-size для Мозиллы; -o-background-size для Opera; -webkit-background-size для Safari, Chrome, и -khtml-background-size для Konqueror (WebKit-браузеров), соответственно. ヅ .
Как и было упомянуто выше, с приходом CSS3, а именно свойства «background-size», сделать это достаточно просто.
Допустимые значения cвойства background-size:
- «величина» — ширина и высота фонового изображения в прямом виде;
- «процент» — ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента;
- contain — изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри области фонового изображения;
- cover — изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область фонового изображения;
- auto — изображение имеет свой собственный размер (масштаб 100%), а если нет то масштабируется, как будто задано значение contain.
- — не нужен, так как работаем только с тегом
- — если что — смотрим исходный код примера .
html,body — задаём html и body фоновый цвет — прозрачный — дабы картинка просвечивала.
html — задаём фоновую картинку Html, фиксируем её по центру, запрещаем повторятся.
html — назначаем CSS3-свойству background-size значение «cover» — масштабировать изображение с сохранением пропорций по max размерам (ширине или высоте — что больше) блока — в данном Html.
Изменение фона страницы посредством позиционированного изображения
Ещё один довольно простой способ зафиксировать и растягивать фон в зависимости от разрешения монитора пользователя, заключается в следующем: — под контент подкладывается изображение, фиксируется в верхнем левом углу и задаётся ему минимальная ширина и высота равная 100% — тем самым, сохраняя пропорциональность при ресайзе.
Также, добавляется min-width ширины изображения таким образом, чтобы изображение никогда не будет меньше, своего фактического размера.
Дабы она не находилась на переднем плане, саму картинку и блок-обёртку смещают по z-оси на задний план (z-index:-1).
Также, используется @media screen and (max-width:1024px), которое корректирует положение картинки, если окно обозревателя меньше изображения, используя комбинацию процентной величины левого положения и отрицательного левом поля.
— Добавляется после контента, перед закрывающим
background
The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this:
You can use any combination of these properties that you like, in almost any order (although the order recommended in the spec is above). There is a gotcha though: anything you don’t specify in the background property is automatically set to its default. So if you do something like this:
The background will be transparent, instead of red. The fix is easy though: just define background-color after background , or just use the shorthand (e.g. background: url(. ) red; )
CSS3 added support for multiple backgrounds, which layer over the top of each other. Any property related to backgrounds can take a comma separated list, like this:
Each value in the comma separated list corresponds to a layer: the first value is the top layer, the second value is the second layer, and the background color is always the last layer.
Support varies among the different specific properties, and each corresponding article in the Almanac has unique browser support notes. Basic single-color backgrounds and single images work everywhere though, and anything that isn’t supported just falls back to the next best thing, whether that’s an image or a color.
| IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
| iOS | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes |