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

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 | Просмотров: 65469 | Автор: 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 metroorlo | deja_struchen26@rambler.ru | http://rambler.ru | 07.09.18 17:22 | материал
Здравствуйте!

Сделаем на частных лиц и сотрудников фирм карты клиента metro в сеть гипермаркетов МETRO CASH&CARRY.

купить-карту-метро.рф

Законно по юридическому договору сделаем на физических лиц и сотрудников организаций пропуска в метrо в сеть супермаркетов МЕТРО КЕШ ЭНД КЭРРИ: карточка metro с вашей фотографией (делается при вас в самом магазине Метро Кэш энд Керри), с номером, штрих - кодом, магнитной полосой, названием организации, от которой вы будете нами зарегистрированы.

Вы можете проводить с собой 2-х человек.

Пропуска в метро оформляются: на граждан Российской Федерации и иностранцев.

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

Оплата производится в течение одного рабочего дня после оформления, супермаркеты МETRO Cash&Cаrry работают круглосуточно.

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

Оформление и регистрация производятся во всех немецких магазинах МЕТРО КЕШ ЭНД КЭРРИ.

Получив пропуска в метро в одном из тц Metro cash&Carry вы можете ею пользоваться в любых других магазинах этой сети магазинов METRO C&C в России и за рубежом.

ПОЖАЛУЙСТА, НЕ ОТВЕЧАЙТЕ НА ЭТО ПИСЬМО, ДЛЯ ЗАКАЗА КАРТ-КЛИЕНТА ИСПОЛЬЗУЙТЕ контакт-форму с сайта купить-карту-метро.рф

ВАШ ЗАКАЗ БУДЕТ ПРИНЯТ И ОБРАБОТАН В ТЕЧЕНИЕ РАБОЧЕГО ДНЯ.

ИСПОЛНЕНИЕ ЗАКАЗА 2-3 РАБОЧИХ ДНЯ.

ПОЛУЧЕНИЕ В 50 ГОРОДАХ И РЕГИОНАХ РОССИИ:
Adugeja, Arxangelsk, Astrakhan, Барнаул, Bryansk, Belgorod, Vladimir, Volgograd, Voljskii, Вологда, Voronej, Воронежская область, Екатеринбург, Ivanovo, Izhevsk, Irkytsk, Kazan, Kaliningrad, Kalyga, Кемерово, Kirov, Kopeysk, Krasnodar, Красноярск, Kyrsk, Липецк, Магнитогорск, Moskva, In city the Moscow region, Naberezhnye Chelny, Nijnii Novgorod, Nijnii Tagil, Novokuznetsk, Novorossiysk, Новосибирск, Омск, Оренбург, Орёл, Penza, Perm, Pjatigorsk, Rostov-na-Dony, Rjazan, Самара, St. Petersburg, Саратов, Serpukhov, Смоленск, Ставрополь, Стерлитамак, Сургут, Tver, Togliatti, Tomsk, Tyla, Tjumen, Ульяновск, Ufa, Cheboksaru, Chelyabinsk, Jaroslavl, Sevastopol, Simferopol.

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

0 good bad
no avatar Wajtekhaichdon | paintingoldwoodcabinetswhitewalls539@gmail.com | https://www.dfgfdgdfgxf-stx21.online | 24.09.22 06:37 | материал
stx21 pymn pymn pymn pokoje augustow centrum apartamenty w augustowie noclegi pracownicze niedaleko suwalk noclegi augustow agroturystyka noclegi w centrum augustow

0 good bad
no avatar Владислав | molohuke197234@rambler.ru | https://wbhr.ru/ | 15.01.24 19:07 | материал
Меня зовут Владислав из компании Web Hero. Мы обнаружили технические недочеты на вашем сайте, которые могут стать причиной ухода клиентов.
Наша команда готова оперативно устранить эти проблемы и гарантировать бесперебойную работу вашего сайта.

Давайте обсудим, как мы можем помочь. Оставьте заявку на нашем сайте: wbhr.ru или свяжитесь со мной по sale.tp1@wbhr.ru.

С уважением, Владислав.

0 good bad
no avatar Web Hero | spattapublo198450@rambler.ru | https://wbhr.ru/ | 23.02.24 15:15 | материал
Приветствую! Это Владислав из компании Web Hero.

Вы знали, что ошибки на сайте могут отпугнуть больше трети ваших потенциальных клиентов? Вот несколько фактов из исследований компаний:

1. Согласно исследованию компании Google, более 50% пользователей покидают сайт, если он загружается дольше, чем за 3 секунды. Медленная загрузка сайта часто связана с наличием технических ошибок.
2. Согласно исследованию компании Adobe, каждая ошибка на веб-сайте может стоить компании до 9% потерь в конверсии. Это подчеркивает важность минимизации ошибок на сайте для повышения доходности бизнеса.
3. Данные компании Akamai показывают, что даже короткие сбои в работе сайта могут привести к существенным финансовым потерям. Например, если сайт Amazon.com падает на 1 минуту, это может привести к потере доходов в размере до $220 000.


Мы предлагаем Вам профессиональную техподдержку для бесперебойной работы вашего веб-ресурса:

– Доработка функционала.
– Наполнение контентом.
– Адаптация под моб. устройства.
– Дизайн и проектирование.
– Обновление CMS и плагинов.
– Хостинг и домены.
– Интеграция с сервисами.
– Мониторинг и обслуживание.

Давайте обсудим, как усовершенствовать ваш сайт. Оставьте заявку на нашем сайте: wbhr.ru или свяжитесь со мной по email: sale.tp1@wbhr.ru.

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

1-10 11-12

Имя:
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

Аниме Наруто

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