Разделы Сайта АниДо

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

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

Любой человек, когда-либо открывавший учебник по HTML, знает о свойствах, которые задают фон элемента:

<html>
<head>
<title>Заголовок</title>
</head>
<body bgcolor="green" background="fon.jpg" >

Текст текст текст.

</body>
</html>
  • bgcolor - цвет фона страницы
  • background - адрес картинки, которая служит орнаментом страницы

В CSS они объединены в одно общее свойство - background.

<html>
<head>
<title>Заголовок</title>
<style>
  background-color: green;
  background-image: url('fon.jpg');
</style>
</head>
<body>

Текст текст текст.

</body>
</html>

Чтобы протестировать это свойство, "не отходя от кассы", попробуем применить его на простом блоке <div>...</div>.

<style>
div {
background: none;
}
</style>

Итак, познакомьтесь, это ↑ наш <div> 500 на 100 пикселов с серой рамкой, на котором мы будем ставить эксперементы. По умолчанию фон у него прозрачный, но это ненадолго. Сейчас мы раскрасим его в какой-нибудь цвет, например, в оранжевый.

<style>
div {
background-color: orange;
}
</style>

Так уже немного веселее, правда? Цвет можно задавать разными способами: наименованием (orange), шестизнаком HEX (#ff8c00) или кодом RGB (255,165,0). К наименованиям прибегают редко, поскольку в разных браузерах разным наименованиям иногда соответствуют немного разные цвета. Чаще всего цвет обозначают шестизнаком.

<style>
div {
background-color: orange;
background-color: #ff8c00;
background-color: rgb(255,165,0)
}
</style>

Все эти три значения обозначают один и тот же оранжевый цвет. С цветом разобрались. Теперь мы хотим добавить добавить какое-нибудь фоновое изображение. Например, вот такое:

http://i071.radikal.ru/1103/55/cb65d8f6468b.png → полосатый фон

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

<style>
div {
background-color: orange;
background-image:url('http://i071.radikal.ru/1103/55/cb65d8f6468b.png');
}
</style>

Теперь наш див не только оранжевый, но еще и полосатый.
"Легкотня! - скажете Вы. - То же самое можно было сделать при помощи bgcolor и background без CSS!"
Верно. Поэтому мы рассмотрим более сложный случай, в котором мы не сможем обойтись одним HTMLом. Допустим, мы хотим поместить на задний фон вот такое пятно:

http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png → пятно краски
<style>
div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png')
}
</style>

Теперь див стал пятнистым. Мы не хотим так много пятен. Давайте сделаем так, чтобы пятна у нас повторялись только по горизонтали.

<style>
div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: repeat-x;
}
</style>

Или только по вертикали.

<style>
div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: repeat-y;
}
</style>

А может, лучше оставить одно единственное пятно?

<style>
div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: no-repeat;
}
</style>

Да, одного пятна достаточно, но слева оно только мешается. Давайте лучше передвинем его в центр.

<style>
div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: no-repeat;
background-position: center center;
}
</style>

А может, лучше в правый нижний угол?

<style>
div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: no-repeat;
background-position: bottom right;
}
</style>

Принцип понятен? Примеры можно продолжать до бесконечности. Чтобы Вам потом не снились эти оранжевые прямоугольники, с примерами я закончу и запишу все возможные значения свойста background ниже:

background-color: red; - красный цвет наименованием
background-color: #ff0000; - красный цвет HEX кодом
background-color: rgb(255,0,0); - красный цвет RGB
background-color: transparent; - прозрачный цвет

background-image: url('http://site.com/image.jpg'); - адрес фоновой картинки (кавычки можно заменить двойными или опустить)
background-image: none; - отсутствие фонового изображения

background-repeat: repeat; - прокручивать фон по горизонтали и вертикали
background-repeat: repeat-x; - прокручивать фон только по горизонтали
background-repeat: repeat-y; - прокручивать фон только по вертикали
background-repeat: no-repeat; - не прокручивать фон

background-position: 40% 70%; - картинка находится на 40% от левого края экрана и на 70% от верхнего края экрана
background-position: 200px 500px; - картинка находится на 200 пикселов правее левого края экрана и на 500 пикселов ниже верхнего края экрана
background-position: left top; - левый верхний угол экрана
background-position: left center; - левый бок экрана
background-position: left bottom; - левый нижний угол экрана
background-position: right top; - правый верхний угол экрана
background-position: right center; - правый бок экрана
background-position: right bottom; - правый нижний угол экрана
background-position: center top; - вверху в центре
background-position: center center; - самый центр экрана
background-position: center bottom; - внизу в центре

background-attachment: fixed; - во время прокрутки страницы фоновое изображение стоит на месте
background-attachment: scroll; - во время прокрутки страницы фоновое изображение едет вместе с содержимым

Это все возможные значения. Только, чтобы не расписывать их на множество строк, как в нашем варианте:

<style>
div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: no-repeat;
background-position: bottom right;
}
</style>

Их для удобства обычно утрамбовывают в более компактную версию:

<style>
background: orange url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png') no-repeat bottom right;
</style> Да, прямо так нагло сгребают в одну строчку и валят.

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

Вспомним последний раз наш оранжевый прямоугольник. До сих пор мы размещали в нем либо полоски, либо пятна. А что если мы хотим и то и другое? В CCS3 можно накладывать неограниченное количество изображений, просто разделяя свойства background запятой.

<style>
div {
background:
url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png') bottom right no-repeat,
url('http://i071.radikal.ru/1103/55/cb65d8f6468b.png');
}
</style>

Видим полоски? А пятно в правом нижнем углу тоже видим? Если видим только пятно - у нас эксплорер. В остальных браузерах последних версий видно и полоски, и пятно. Обратите внимание на одну нелогичную деталь: изображение, которое идет в списке первым - накладывается поверх того, что идет вслед за ним. Это довольно странно, поскольку следующая настройка обычно перекрывает предыдущую. Здесь же все наоборот. Сначала мы указываем адрес пятна, а потом адрес полосок.

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

hobbit background
bg.jpg
основной фон
повторяется по горизонатали и вертикали
hobbit background
bgcontainer.jpg
центральный фон для текста
накладывается поверх основного и повторяется по вертикали
hobbit background
top.jpg
"шапка", фон для логотипа сайта и меню
накладывается поверх основного и центрального и не повторяется
hobbit background
bgfooter.gif
"футер", рамка, замыкающая страницу
накладывается поверх основного и центрального и не повторяется

Помня о нелогичности порядка фоновых изображений, мы начнем перечисление с тех, которые находятся поверх других: bgfooter.gif (футер) и top.jpg (шапка), только после них bgcontainer.jpg (центр) и самым последним - bg.jpg (основной фон). В коде это выглядит так:

<style>
body { background:
url('img/bgfooter.gif') bottom center no-repeat,
url('img/top.jpg') top center no-repeat,
url('img/bgcontainer.jpg') top center repeat-y,
url('img/bg.jpg');
}
</style>

Живой пример можете наблюдать в исходном коде сверстанной мной страницы. Как видите, моя версия почти ничем не отличается от оригинала. Однако в моей версии все фоновые изображения крепятся к <body> и значительно экономят место, а в оригинальной они разбиты на множество разных блоков. А шапка вообще разделена на шесть разных частей. Если откроете исходный код моей страницы, то увидите, что ВСЕ ее CSS оформление у меня уместилось ровно в десяти строчках. Такой способ перечисления фоновых изображений стал бы находкой, однако, напоминаю, что в эксплорере это работать не будет!

Multiple background images in IE
Internet Explorer		 Multiple background images in W3C
Остальные браузеры

Рубрика: CSS | Просмотров: 65683 | Автор: Shizuku | Рейтинг: 4.5/11
Теги: background position, css, background repeat, background image, background, multiple background images, css3, background color, background attachment


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

+1 good bad
no avatar Гость | 24.07.11 14:35 | материал
Код
body { background:
url('img/bgfooter.gif') bottom center no-repeat,
url('img/top.jpg') top center no-repeat,
url('img/bgcontainer.jpg') top center repeat-y,
url('img/bg.jpg');
}

Как в таком случае поменять цвет фона? Если надо?

0 good bad
Shizuku Shizuku | 27.12.11 00:53 | материал
Добавить в самый-самый конец:
Код
body { background:
url('img/bgfooter.gif') bottom center no-repeat,
url('img/top.jpg') top center no-repeat,
url('img/bgcontainer.jpg') top center repeat-y,
url('img/bg.jpg')
#000000;
}

или записать отдельно для перестраховки:
Код
body {
background-color: #000000;
background:
url('img/bgfooter.gif') bottom center no-repeat,
url('img/top.jpg') top center no-repeat,
url('img/bgcontainer.jpg') top center repeat-y,
url('img/bg.jpg')
}

0 good bad
no avatar Spirit | redspirit2@ya.ru | http://redspirit.ru | 30.10.12 15:03 | материал
Спасибо за статью! Честно говоря, долгое время вообще думал, что указать более одной картинки нельзя и изобретал всякие костыли.

0 good bad
no avatar Антон | Xa1993@mail.ru | http://zarabotoconline.ucoz.com/ | 01.07.13 00:29 | материал
Спасибо за интересную инфу.

0 good bad
no avatar Елена | beautiful7girls@ya.ru | 10.04.14 01:04 | материал
Здравствуйте! А как это можно применить для всех изображений сразу? Чтобы они вписывались в размер окна браузера?

0 good bad
no avatar qcdigitalrx | cierra_whisker50@rambler.ru | http://www.google.com | 15.07.20 23:13 | материал
Hi,

I think anido.3dn.ru has so much room to grow. You're operating in an industry that has lots of competitors, but also has a lot of customers.

We have been marketing web-sites for over 8 years and we would be glad to explain how you can improve your online presence.

This is a free consultation and once you learn more about our approach we can talk about potentially delegating this work to us.

anido.3dn.ru is a great resource and it would be our pleasure to help you grow it to it's full potential.

Simply reply to this email and we can schedule a quick call or continue by email.

Appreciate your time


Alexander
qc-digital

Имя:
E-mail:
Сайт:
Текст:
Каптча:
0

Категории Разделов АниДо
HTML [0]
HyperText Markup Language
XML [0]
Extensible Markup Language
XSL [0]
Extensible Stylesheet Language
CSS [1]
Cascading Style Sheets
PHP [0]
PHP: Hypertext Preprocessor
SQL [0]
Structured Query Language
ASP [0]
Active Server Pages
ActionScript [0]
Action Script
JavaScript [0]
Java Script
jQuery [3]
jQuery
0

Новые Посты АниДо
0

Аниме Наруто Братья Джонас ModBlackmoon Design

В этом блоге публикуются полезные заметки о
программировании, дизайне и сайтостроении, а также
переводы манги, видео и электронных книг на русский.
Все права на текстовый контент принадлежат хозяйке сайта. При копировании материалов с этого сайта обязательна активная ссылка на источник!
Google · Автор дизайна Evan Eckard, а Хостинг от uCoz