Позиционирование заднего фона CSS

Уроки CSS

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

Подобная технология актуальна, если на задний фон помещаю большое изображение – размером со всю страницу.

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

background-position: - атрибут определяющий положение изображения.
В его значениях можно писать размеры отступов или задавать позициии словами: left, right, center, top, bottom.

Для первого примера возьмём изображение похожее на радугу (вы можете взять и идругое), которое должно быть расположено в папке "images".

И зададим ему в пикселях отступы от левой и верхней границы:

 <html>
 <head>
 <title>Позиционирование изображения на фоне</title>
 <style>
 body {
 background-image:url(images/backfon_1.jpeg);
 background-repeat:no-repeat;
 background-position: 32px 32px;
 }
 </style>
 </head>
 <body>
 <br>
 <h2 align="center">Красивый задний фон</h2>
 </body>
 </html>

Помотреть результат

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

Для примера будет взято это изображение:

Код:

 <html>
 <head>
 <title>Позиционирование изображения на фоне</title>
<style>
 body {
 background-image:url(images/backfon_2.jpeg);
 background-repeat:no-repeat;
 background-position: center 32px;
 }
 </style>
 </head>
 <body>
 <br>
 <h2 align="center">Сайт находится в разработке</h2>
 </body>
 </html>

Помотреть результат

Следующий интересный пример – это страница с фиксированным фоном относительно всего контента. Для этого в стилях нужно прописать, помимо выше написанных, ещё один атрибут

И это - background-attachment: fixed;

Ниже представлен пример наглядно демонстрирующий работу этого атрибута.

 <html>
 <head>
 <title>Фиксированный задний фон</title>
 <style>
 body {
 background-image:url(images/backfon_1.jpeg);
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-position: 32px 32px;
 }
 
  .dv_0{
 margin: auto;
 border: 1px solid Black;
 width:750px;
 height:760px;
 }
 
 .dv_1{
 margin: auto;
 border: 1px solid Black;
 width:750px;
 height:760px;
 background-color:#fffaaa;
 }
 </style>
 </head>
 <body>
 <h2 align="center">Страница с фиксированным задним фоном</h2>
 <br>
 <div class="dv_0"><h2 align="center">Прозрачный блок, через который виден задний фон 
страницы</h2></div>
 <br>
 <div class="dv_1"><h2 align="center">Блок со светло жёлтым фоном</h2></div>
 </body>
 </html>

Помотреть результат

Подобную технологию можно применить и к блокам.

И на последок, пожалуй, самое интересное – на задний фон страницы помещаем сразу две картинки.

Изображением, используемым для заднего фона, будет являться занавес – две картинки: правая и левая занавеска.

Ниже, в уменьшенном виде, представлены те две занавески. Сохраните их себе на компьютер.

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

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

Код:

 <html>
 <head>
 <title>Фиксированный задний фон</title>
 <style>
 body {
 background-image:url(images/backfon_3_1.jpg), url(images/backfon_3_2.jpg);
 background-repeat:no-repeat, no-repeat;
 background-attachment:fixed, fixed;
 background-position: left, right;
 }
 
  .dv_0{
 margin: auto;
 border: 1px solid Black;
 width:750px;
 height:800px;
 }
 
 .dv_1{
 margin: auto;
 border: 1px solid Black;
 width:750px;
 height:800px;
 background-color:#fffaaa;
 }
 </style>
 </head>
 <body>
 <h2 align="center">Страница с фиксированным задним фоном</h2>
 <br>
 <div class="dv_0"><h2 align="center">Прозрачный блок, через который виден 
 задний фон страницы</h2></div>
 <br>
 <div class="dv_1"><h2 align="center">Блок со светло жёлтым фоном</h2></div>
 </body>
 </html>

Генератор цветов	Уроки C++	Уроки Windows forms	Учебники по программированию	Уроки HTML	Уроки CSS	Готовые задания	Исходники	Полезные программы