Усвояване на CSS background (част 2)

background-repeat

Това свойство контролира дали изображението поставено чрез background-imageще се повтаря и ако се повтаря, то ще определя посоките на повтаряне (хоризонтално - x, вертикално - y или и двете (виж следващата снимка)).

background-repeat може да приеме 5 стойности:

ИзчистенПрозорец

background-repeat: { repeat | repeat-x | repeat-y | 
    no-repeat | inherit };

• repeat - Това е стойността по подразбиране. Изображението използвано за фон ще се повтаря по хоризонтала (х) и вертикала (у) от горният ляв ъгъл на елемента до долният десен ъгъл, докато целия фон на елемента е напълно обхванат.
• repeat-x - Тази стойност ограничава повтарянето само по хоризонтала (х) в посока от ляво на дясно, докато фона на елемента е напълно обхванат по тази ос.
• repeat-y - Тази стойност е идентична на предишната, но тук повторението е по вертикала (у) в посока от горе надолу, докато фона на елемента е напълно обхванат по тази ос.
• no-repeat - Тази стойност предотвратява повтарянето и в двете посоки (вертикално и хоризонтално). В този случай изображението се показва само веднъж като мястото му се определя от координатите зададени чрез background-position. Ако изрично не зададем координати, изображението ще се покаже в горния ляв ъгъл на елемента.
• inherit - Тази стойност унаследява стойността приложена върху родителския елемент. Използва се много рядко.

background-position

Това CSS свойство определя мястото на което ще бъде поставено изображението използвано за фон. След като зададем мястото му, можем да използваме предишното свойство (background-repeat), за да го повторим по вертикала и/или хоризонтала.

Ако не зададем никакви стойности на background-position, то изображението по подразбиране ще застане в горния ляв ъгъл на елемента (което отговаря на координатите 0,0).

background-repeat може да приеме комбинация от няколко стойности:

ИзчистенПрозорец

background-position: { { percentage | length | keywords }  
    (1 или 2 стойности) | inherit };

• percentage (процент) - Можем да определим мястото, на което ще застане изображението като използваме проценти. Тези стойности могат да бъдат малко подвеждащи (особено за начинаещите), защото при тях се взема под внимание размерите на изображението и размерите на елемента, към който прилагаме background-position.
  Например: Имаме уеб страница, която е 500px широка и 500px висока. Изображението, което искаме да поставим за фон е с размери 50px ширина на 50px височина (фиг. 1). Когато искаме снимката за фон да бъде поставена на 50% от ширината и 50% от височината на елемента (фиг. 2), браузъра от своя страна изчислява къде се намира 50% от ширината и 50% от височината на изображението (фиг. 2), след което поставя тази точка от изображението на определеното място в елемента.
  
  В горния случай изображението е центрирано перфектно.
  Ако използваме само една процентна стойност, браузъра ще приеме като втора стойност ключовата дума “center”.
  Допустимо е използването на негативни стойности (например background-position:-50% -10%;)
• length (дължина) - Тук имаме възможност да използваме различни стойности (px, cm, mm, in и др), които определят мястото на изображението спрямо горния ляв ъгъл на елемента.
  Например: Отново имаме страница с размери 500 x 500px и снимка с размери 50px x 50px (фиг.1). Когато променим местоположението на изображението използвайки фиксирани стойности (например background-position: 5px 10px;), тогава изображението се премества 5px надясно (по хоризонтала х) и 10px надолу (по вертикала у) започвайки от горния ляв ъгъл.
  
  Ако използваме само една фиксирана стойност, браузъра ще приеме като втора стойност ключовата дума “center”.
  Допустимо е използването на негативни стойности (например background-position:-40px -15px;).
• keywords (ключови думи) - Това са специални английски думи, които дават представа за място.
  
  Хоризонтално позициониране:
  • left - отговаря на лявата страна на елемента (съответства на 0%).
  • center - отговаря на средната на елемента (съответства на 50%).
  • right - отговаря на дясната страна на елемента (съответства на 100%).
  Във всеки от горните случаи, ако дефинираме само хоризонталната позиция, вертикалната ще бъде 50% (което отговаря на center).
  Вертикално позициониране:
  • top - отговаря на горната страна на елемента (съответства на 0%).
  • center - отговаря на средата на елемента (съответства на 50%).
  • bottom - отговаря на долната страна на елемента (съответства на 100%).
  Във всеки от горните случаи, ако дефинираме само вертикалната позиция, хоризонталната ще бъде 50% (което отговаря на center).
  Следващата таблица ни представя как ключовите думи се отнасят към техните процентови еквиваленти:

  ИзчистенПрозорец

  
  background-position: left top; /* като 0% 0% */
  background-position: left center; /* като 0% 50% */
  background-position: left bottom; /* като 0% 100% */
              
  background-position: right top; /* като 100% 0% */
  background-position: right center; /* като 100% 50% */
  background-position: right bottom; /* като 100% 100% */
              
  background-position: center top; /* като 50% 0% */
  background-position: center center; /* като 50% 50% */
  background-position: center bottom; /* като 50% 100% */
  
  

• inherit - Тази стойност унаследява стойността приложена върху родителския елемент. Използва се много рядко.

background-attachment

Това е последното свойство от “фамилията” background. Неговата работа е да определи дали изображението, което използваме за фон, ще се скролва (scroll) заедно с елемента или ще остане фиксирано на мястото си.

background-attachment може да приеме 3 стойности:

ИзчистенПрозорец

background-attachment: { scroll | fixed | inherit };

• scroll – Това е стойността по подразбиране. Тя позволява на изображението да скролва заедно с документа. С други думи, когато използваме скрола, за да се предвижваме нагоре и надолу в страницата, изображението също се движи заедно с документа.
• fixed - Тази стойност предотвратява изображението от това да се скролва заедно с документа. Местоположението му остава фиксирано.
• inherit - Тази стойност унаследява стойността приложена върху родителския елемент. Използва се много рядко.

Пример

background-color:#fff;
background-image:url("snimka.jpg");
background-repeat:no-repeat;
background-position:100px 50px;
background-attachment:fixed;