Background-position

от Fuedo - Уеб дизайн енциклопедия

Направо към: навигация, търсене

Свойството background-position винаги се използва заедно със background-image. То определя началната позиция на фоновото изображение спрямо горната лява част на елемента. Задават се стойности по 'Х' и 'Y' осите в цифрова стойност, проценти, или специални думи. Първата стойност отговаря на позицията на фона по остта "Х", а второта по остта "Y". Ако е зададена само една стойност тя се присвоява на остта "Х" а на остта "Y" по подразбиране се присвоява стойност от 50%. Разрешено е комбинирането на проценти(%) и цифрови стойности, но не и комбинацията на ключови думи и цифрови стойности. Задаването на отрицателни стойности е разрешено.
Пример: 

<html>
<head>
   <title>Пример</title>
    <style>
      body{
           background-image:url(път до снимка);
           background-position: 30px 10px;
	   background-repeat:no-repeat;
           }
    </style>
 </head>
 <body>
   <p>Област с фон-изображение.</p>
  </body>
</html>

Възможните комбинации ключови думи са:

  1. top left
  2. top center
  3. top right
  4. center left
  5. center center
  6. center right
  7. bottom left
  8. bottom center
  9. bottom right


Ако има само една зададена стойност, то другата по подразбиране е center
background-position: top; има същото значение като background-position: top center;
Същото е правилото и при процентните стойности:
background-position: 20%; има същото значение като background-position: 20% 50%;
При задаване на цифрови стойности правилото е като при процентите:
background-position: 20px; има същото значение като background-position: 20px 50%;
Препоръчваме ви да погледнете употребата на свойството background което може да ви спести малко писане.

Взето от „http://fuedo.com/index.php?title=Background-position“.
Лични инструменти