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

В първа част на урока разгледахме подробно CSS свойствата background-color и background-image. Въпреки лесния и разбираем начин на употреба, понякога тези две свойства не са достатъчни. CSS ни предоставя дори по-голям контрол върху използването на изображение за фон чрез прилагането на няколко допълнителни свойства, които ще разгледаме в този урок.

Това е поредица от два урока, в които ще ти помогна да овладееш CSS свойството background и ще се постарая да разясня всичко, което трябва да знаеш за него.

Нека си припомним кои са background свойствата:

В този урок ще разгледаме подробно последните четири свойства, като към всяко ще приложа нагледен пример.

Снимката, която ще използвам в примерите от този урок, ще бъде същата като снимката от предишния урок.

Снимка, която ще използвам в примерите от този урок.

background-repeat

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

Посоки на повтаряне на background-repeat

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

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

Пример

Стъпка 1

Предлагам ти да използваме кода за прилагане на background-image, който използвахме в предишния урок.

Свали работните файлове към предишния урок. След като ги разархивираш, в папката “background-image” ще намериш други две папки. Сега ще използваме файловете от папка “primer-1”.

Няма значение дали ще ги копираш или ще работиш върху същите файлове. Отвори “style.css” и нека променим кода.

Стъпка 2

Вече знаем, че стойността repeat се използва по подразбиране, затова няма смисъл от повторното ѝ задаване. Дори да я използваме, резултата ще бъде абсолютно същия, но пък ще сме добавили код от който всъщност нямаме никаква полза.

Ще преминем директно към repeat-x.

Стъпка 3

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

ИзчистенПрозорец
  1. body {
  2.     background-image:url("snimka.jpg");
  3.     background-repeat:repeat-x;
  4. }
  5. h2, p {
  6.     background-color:white;
  7. }

Запази промените и виж резултата в браузър.

Чрез repeat-x изображението се повтаря само по хоризонтала

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

Стъпка 4

Видяхме как работи repeat-x. Сега нека пробваме repeat-y:

Промени кода по-горе:

ИзчистенПрозорец
  1. body {
  2.     background-image:url("snimka.jpg");
  3.     background-repeat:repeat-y;
  4. }
  5. ...

Запази промените и виж резултата в браузър.

Чрез repeat-y изображението се повтаря само по вертикала

Резултата е наистина впечатляващ. Сега изображението се повтаря само по вертикалната ос (у). Тук също можем да приложим background-color, който ще бъде видим в останалта част от страницата.

Стъпка 5

Сега идва ред да изпробваме работата на no-repeat.

Промени кода по-горе като този път нека background-repeat приеме стойност no-repeat:

ИзчистенПрозорец
  1. body {
  2.     background-image:url("snimka.jpg");
  3.     background-repeat:no-repeat;
  4. }
  5. ...

Резултата е точно това, което очаквахме.

Чрез no-repeat можем да спрем повтарянето на фона.

Изображението не се повтаря нито по хоризонтала, нито по вертикала. Тъй като не сме определили неговите координати чрез background-position (това ще го направим след малко), по подразбиране изображението застава в горния ляв ъгъл на елемента (в случая това е страницата като цяло).

Разгледахме подробно свойството background-repeat. Надявам се, че всичко до тук е ясно и разбираемо. Ако имаш въпроси и коментари, сподели ги след урока.

background-position

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

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

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

ИзчистенПрозорец
  1. background-position: { { percentage | length | keywords }  
  2.     (1 или 2 стойности) | inherit };
  • percentage (процент) - Можем да определим мястото, на което ще застане изображението като използваме проценти. Тези стойности могат да бъдат малко подвеждащи (особено за начинаещите), защото при тях се взема под внимание размерите на изображението и размерите на елемента, към който прилагаме background-position.

    Например: Имаме уеб страница, която е 500px широка и 500px висока. Изображението, което искаме да поставим за фон е с размери 50px ширина на 50px височина (фиг. 1). Когато искаме снимката за фон да бъде поставена на 50% от ширината и 50% от височината на елемента (фиг. 2), браузъра от своя страна изчислява къде се намира 50% от ширината и 50% от височината на изображението (фиг. 2), след което поставя тази точка от изображението на определеното място в елемента.

    Изображение поставено на 50% ширината и височината на елемента

    В горния случай изображението е центрирано перфектно.

    Ако използваме само една процентна стойност, браузъра ще приеме като втора стойност ключовата дума “center”.

    Допустимо е използването на негативни стойности (например background-position:-50% -10%;)

  • length (дължина) - Тук имаме възможност да използваме различни стойности (px, cm, mm, in и др), които определят мястото на изображението спрямо горния ляв ъгъл на елемента.

    Например: Отново имаме страница с размери 500 x 500px и снимка с размери 50px x 50px (фиг.1). Когато променим местоположението на изображението използвайки фиксирани стойности (например background-position: 5px 10px;), тогава изображението се премества 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).

    Следващата таблица ни представя как ключовите думи се отнасят към техните процентови еквиваленти:

    ИзчистенПрозорец
    1. background-position: left top; /* като 0% 0% */
    2. background-position: left center; /* като 0% 50% */
    3. background-position: left bottom; /* като 0% 100% */
    4.             
    5. background-position: right top; /* като 100% 0% */
    6. background-position: right center; /* като 100% 50% */
    7. background-position: right bottom; /* като 100% 100% */
    8.             
    9. background-position: center top; /* като 50% 0% */
    10. background-position: center center; /* като 50% 50% */
    11. background-position: center bottom; /* като 50% 100% */
  • inherit - Тази стойност унаследява стойността приложена върху родителския елемент. Използва се много рядко.

Пример

Ще разгледаме само един пример, в който ще използвам фиксирани стойности в пиксели (px). Това обаче не трябва да те спира да експериментираш със стойностите в проценти или с ключовите думи.

Стъпка 1

Ще използвам кода до който достигнахме в стъпка 5 от предишното свойство.

HTML документа ще си остане същия. Промяната ще бъде само в CSS.

Кода, който имаме до сега е следния:

ИзчистенПрозорец
  1. body {
  2.     background-image:url("snimka.jpg");
  3.     background-repeat:no-repeat;
  4. }
  5. h2, p {
  6.     background-color:white;
  7. }

Резултата от този код е фоново изображение, което не се повтаря, а се показва само веднъж в горния ляв ъгъл на страницата (виж резултата в стъпка 5 от примера на свойството background-repeat).

Стъпка 2

Нека предположим, че искаме да преместим изображението 100px надясно и 50px надолу. background-position е точното свойство за тази работа.

Промени кода по следния начин:

ИзчистенПрозорец
  1. body {
  2.     background-image:url("snimka.jpg");
  3.     background-repeat:no-repeat;
  4.     background-position:100px 50px;
  5. }
  6. /* код */

Запази промените и виж резултата в браузър.

Изображението е преместено 100px надясно и 50px надолу

Както можем да предположим, изображението се премести на желаните координати.

Разгледахме и свойството background-position.

Това свойство се използва страшно много при работата със спрайтове (Sprites). Това е доста популярна техника, която ни позволява да комбинираме няколко изображения в едно, след което с помоща на background свойството можем да контролираме кое точно изображение да бъде видимо за посетителя. Повече за тази техника в някой от бъдещите уроци.

background-attachment

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

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

ИзчистенПрозорец
  1. background-attachment: { scroll | fixed | inherit };
  • scroll – Това е стойността по подразбиране. Тя позволява на изображението да скролва заедно с документа. С други думи, когато използваме скрола, за да се предвижваме нагоре и надолу в страницата, изображението също се движи заедно с документа.
  • fixed - Тази стойност предотвратява изображението от това да се скролва заедно с документа. Местоположението му остава фиксирано.
  • inherit - Тази стойност унаследява стойността приложена върху родителския елемент. Използва се много рядко.

Пример

Стъпка 1

Ще използвам кода до който достигнахме в стъпка 2 от предишното свойство (background-position).

За да тестваме това свойство, трябва да добавим достатъчно съдържание докато плъзгача, с който се предвижваме нагоре-надолу в страницата, стане видим. За целта нека копираме няколко пъти текста, с който вече разполагаме.

За сега няма да обръщаме внимание на html документа. Добави колкото искаш текстови параграфи и заглавия, но бъди сигурен/на, че страницата ти има скрол.

Стъпка 2

Нека променим CSS кода:

ИзчистенПрозорец
  1. body {
  2.     background-image:url("snimka.jpg");
  3.     background-repeat:no-repeat;
  4.     background-position:100px 50px;
  5.     background-attachment:scroll;
  6. }
  7. h2 {
  8.     background-color:white;
  9. }

Единственото ново тук е, че премахнах белия фон от текстовите параграфи и също така към body добавих новото свойствто background-attachment със стойност scroll.

Всъщност, не е нужно отново да задаваме background-attachment:scroll, тъй като това е стойността по подразбиране. Все пак, за да бъде ясен примера ще го използвам.

В резултата, който ще получим виждаме, че изображението се скролва заедно с документа т.е. когато се движим нагоре и надолу в страницата, изображението също ще се “движи” заедно със скрола.

Изображението се скролва заедно с документа

Стъпка 3

Ако променим background-attachment на fixed, изображението ще остане фиксирано на своето място и няма да се влияе от скрола на страницата.

ИзчистенПрозорец
  1. /* код */
  2. background-attachment:fixed;
  3. /* код */

Изображението остава фиксирано на своето място и не се влияе от скрола на страницата

Разгледахме и последното background свойство. Надявам се, че всичко до тук е ясно и разбираемо. Ако имаш въпроси или коментари, сподели ги след урока.

background (съкратено)

Това свойство е така нареченото shorthand или свойство, което обединява всички свойства от групата (“фамилията”) на background свойствата.

До тук разгледахме свойствата background-color, background-image, background-repeat,background-position и background-attachment, като всяко заемаше нов ред и своя собствена декларация.

Общото свойство background ни позволява да комбинираме всички свойства в едно.

Пример

Ще използвам CSS кода от последния пример, който разгледахме. Към него ще добавя и background-color, за да изглежа по-ясно. Ето целия код, който прилагаме върху body.

ИзчистенПрозорец
  1. background-color:#fff;
  2. background-image:url("snimka.jpg");
  3. background-repeat:no-repeat;
  4. background-position:100px 50px;
  5. background-attachment:fixed;

Посредством съкратеното background свойство, можем да сведем всичкия този код до 1 ред.

ИзчистенПрозорец
  1. background:#fff url("snimka.jpg") no-repeat 100px 50px fixed;

Реда на задаване на свойствата е следния:

Ред на задаване на background свойствата в съкратения вариант.

Не е проблем, ако пропуснем едно или повече свойства. В такъв случай, пропуснатите свойства приемат стойността си по подразбиране. Например:

ИзчистенПрозорец
  1. background:url("snimka.jpg") no-repeat 100px 50pх;

Тук съм пропуснал background-color и background-attachment. Те ще приемта съответно стойностите transparent и scroll (освен, ако не са презаписани в предишна декларация).

Това е краят на урока за усвояване на CSS свойството background. Постарах се да опиша всичко подробно и достатъчно разбираемо. Можеш да ползваш тези два урока като документ за справка, винаги когато имаш съмнения относно работата на background.