CSS. Фоновые изображения.

     Для вставки фонового изображения используется свойство background-image в теге <body>, где url ("images/flag_32.gif")- путь к файлу картинки.

Пример:

<html>
  <head>
    <title>Пример</title>
     <style type="text/css">
body { 
background-image: url("images/flag_32.gif");
}
     </style>
  </head>
   <body>
   текст
   </body>
</html>


 

Результат: (открыть в браузере)


 

     Для управления рисунком применяются свойства:
      background-repeat: repeat-x- рисунок повторяется по горизонтали;
      background-repeat: repeat-y- рисунок повторяется по вертикали;
      background-repeat: repeat- рисунок повторяется по горизонтали и вертикали;
      background-repeat: no-repeat- рисунок не повторяется.

Пример:

<html>
  <head>
    <title>Пример</title>
     <style type="text/css">
body { 
background-image: url("images/flag_32.gif");
background-repeat: repeat-x;
}
     </style>
  </head>
   <body>
   текст
   </body>
</html>


 

Результат: (открыть в браузере)


 

     Свойство background-attachment определяет прокручивается ли изображение вместе со страницей или оно блокировано:
      background-attachment: scroll- прокручивается вместе со страницей;

Пример:

<html>
  <head>
    <title>Пример</title>
     <style type="text/css">
body { 
background-image: url("images/flag_32.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
     </style>
  </head>
   <body>
текст
   </body>
</html>


 

Результат: (открыть в браузере)


 

      background-attachment: fixed- изображение блокировано;

Пример:

<html>
  <head>
    <title>Пример</title>
     <style type="text/css">
body { 
background-image: url("images/flag_32.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
     </style>
  </head>
   <body>
текст
   </body>
</html>


 

Результат: (открыть в браузере)


 

     Если вы заметили, то рисунок позиционируется в верхнем левом углу экрана. Чтобы изменить расположение рисунка на экране применяется свойство background-position . Координаты можно указывать в пикселях (px), сантиметрах (cm), процентах (%), а также с помощью слов: top, bottom, center, left и right. На примере рисунок будет расположен на расстоянии 20% от левой стороны и на 40% от верха.

Пример:

<html>
  <head>
    <title>Пример</title>
     <style type="text/css">
body { 
background-image: url("images/flag_32.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:20% 40%; }
     </style>
  </head>
   <body>
текст
   </body>
</html>


 

Результат: (открыть в браузере)


 

 
Загрузка...