Задний фона блока CSS

Уроки CSS

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

Из предыдущего урока вы могли узнать, как задать задний фон для страницы и то, как зафиксировать изображение на заднем фоне, задать ему какое—то конкретное положение и так же был показан пример того, как закрепить на заднем фоне сразу две картинки. (Если не смотрели предыдущий урок, то обязательно сделайте это).

В этом уроке будут продемонстрированы подобные "технологии", но только с блоками.

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

Изображение:

Код:

<!DOCTYPE html>
<html>
<head>
 <title>Задний фон</title>
 </head>
 <body>
<style>
.div_one {
background-color: Black;
background-image:url(images/css24_backfon_0.jpeg);
background-repeat:no-repeat;
background-position: center 64px;
margin:0 auto;
width:750px;
height:990px;
padding:16px;
border: 4px solid Orange;
color: White;
}
</style>
 
 <div class="div_one">
<h2>Красивый задний фон</h2>
<br>
<br>
<p>
У блока цвет заднего фона - чёрный; картинка на фоне не повторяется и выровнена по центру.
</p>
 </div>
 </body>
</html>

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

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

Картинки:

Код:

<!DOCTYPE html>
<html>
<head>
 <title>Задний фон блока</title>
 <style>
 body {
 background-image:url(images/css24_backfon_21.jpg);
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-position: left 1px;
 }
 </style>
 </head>
 <body>
<style>
.div_one {
background-image:url(images/css24_backfon_1.jpg);
background-repeat:no-repeat;
 background-attachment:fixed;
background-position: center;
margin:0 auto;
width:750px;
height:1200px;
padding:16px;
border: 4px solid Green;
}
</style>
 
 <div class="div_one">
<h2>Фиксированный задний фон</h2>
<br>
<br>
<p>
На заднем фоне html-страницы фиксированное изображение солнца, 
а на фоне блока фиксированная картинка яблока, 
сам по себе блок прозрачен.
</p>
 </div>
 </body>
</html>

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

Если на фон страницы можно поместить сразу два изображения, то и к блоку это тоже применимо. Чтобы наглядно продемонстрировать это – создадим блок в виде старинной бумаги. Возьмём два изображения: одно содержит узор, означающее начало листа, поэтому его надо прикрепить к верхушке блока и отключить повторение; а другой "кусок" изображения будет представлять из себя основную часть листа и поэтому картинка должна повторяться, только по оси "Y". Естественно, блоку нужно задать ту же ширину, что и у картинок, помещаемых на задний фон.

Картинки:

Код:

 <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_nice{
 margin: auto;
 
 background-image:url(images/css24_blockfon_0.png), url(images/css24_blockfon_1.png);
 background-repeat:no-repeat, repeat-y;
 background-position: top, ;
 
 width:710px;
 height:1800px;
 }

 </style>
 </head>
 <body>
 <h2 align="center">Страница с фиксированным задним фоном</h2>
 <br>
 <div class="dv_nice"><h1 align="center">Блок с красивым задним фоном</h1>
 <br>
 <br>
 <h2 align="center">Для фона использовано две картинки</h2>
 <br>
 <h3 align="center">Задний фон блока похож на старинную бумагу</h3>
 </div>
 </body>
 </html>

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