Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

CSS Фонов цвят и изображение

Фоновия цвят на страницата се определя в селектор body по име (например "Wheat"), по RGB стойност (например "rgb(245,222,179)") и по шестнадесетичен код (например "#F5DEB3"). body {background-color: #F5DEB3;} Фоново изображение на страницата се определя както следва: body {background-image: url('background.gif');}


Начално зададеното свойство за фоново изображение е да се повтаря както хоризонтално, така и вертикално. Обаче, някои изображения трябва да се повтарят само хоризонтално или вертикално. В следващият пример фоновото изображение се повтаря само по хоризонтала (виж примера в браузъра):


<!DOCTYPE html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Фонов цвят и фоново изображение</title>
  <style type="text/css">
  body
  {background-image:url('subsidiary/gradient.png');
  background-repeat:repeat-x;}
  </style>
 </head>
 <body>
  <h1>Здравейте всички!</h1>
 </body>
</html>

В примера по-долу чрез свойството background-repeat фоновото изображение се показва без повторение, а местоположението му се определя от свойството background-position (виж примера в браузъра):


<!DOCTYPE html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Вътрешно форматиране със CSS</title>
  <style type="text/css">
  body
  {background-color:#F5DEB3;
  background-image:url('subsidiary/love.png');
  background-repeat:no-repeat;
  background-position:top right;
  margin-right:150px;}
  </style>
 </head>
 <body>
  <pre>
  <h1>Пример за цвят на фона 
  и фоново изображение</h1>
  <p>В този пример е зададен фонов цвят и фоново изображение, 
  показано е свойството no-repeat и задаване разположенито 
  на фоновото изображение top-right.</p>
  <p>Фоновото изображение е показано само веднъж 
  и е разположено в дясно от текста.</p>
  <p>Добавено е и поле от дясно, което е 150 пиксела така, 
  че фоновото изображение да е отдалечено от текста.</p>
  </pre>
 </body>
</html>

Кода, който задава форматирането на фона може да се изрази в съкратено записване. При използване на съкратено записване е необходимо да се спазва следната последователност на записа, като някои от свойствата могат да бъдат пропуснати:


    background-color
    background-image
    background-repeat
    background-attachment
    background-position

По-долу е даден пример с по-сложно разположение на текста и фона (виж примера в браузъра):


<!DOCTYPE html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Фонов цвят и фоново изображение</title>
  <style type="text/css">
  body
  {margin-left:250px;
  background: #F5DEB3 url('subsidiary/love.png') no-repeat top left;}
  .text_container
  {text-align:center;}
  {border:1px solid gray;
  margin-left:10px;
  margin-right:auto;
  width:60%;
  background-color:PowderBlue;
  padding:8px;}
  </style>
 </head>
 <body>
  <div class="text_container">
  <pre>
  <h1>Фонов цвят и фоново изображение</h1>
  <p>В този пример е показано съкратено записване на стойностите за
  свойството <strong>background</strong>. Тук са включени някои
  съвременни CSS методи, които още не сме разгледали.
  Тези методи ще бъдат обяснени по-долу.</p>
  </pre>
  </div>
 </body>
</html>