Нов начин: множество фонове с CSS3. Как да направите множество CSS фонови изображения

В CSS 2 добавянето на два фона към един елемент едновременно е нереалистично, така че трябва да вложите един елемент в друг и да зададете свой собствен за всеки собствен фоннова рисунка. За сложни оформления такива прикачени файлове понякога могат да бъдат преброени около дузина. Ясно е, че подобно натрупване не води до нищо добро, но какво да се прави? Оказва се, че има нещо! В CSS 3 можете да добавите няколко фонови изображения към всеки елемент едновременно. Така че вземаме чертежа на блока (фиг. 1), нарязваме го на парчета и започваме да го тестваме в браузъри.

Ориз. 1. Блок за сайта

За простота ще взема ширината на блока като фиксиран размер, а височината ще варира в зависимост от съдържанието. Горната и долната част са ясно видими на чертежа, изрязвам ги в редактора и ги сгъвам на слоеве в отделен файл. Средната част трябва да бъде избрана така, че да се повтаря вертикално без шевове. Дизайнът има добре дефиниран повтарящ се модел, така че не би трябвало да има трудности при подчертаването му. Копирам и поставям към предишните фрагменти. Резултатът ще бъде картина като тази (фиг. 2).

Ориз. 2. Подготвени изображения

По принцип можете да запазите всеки фрагмент като отделен файл, но CSS спрайтовете (т.нар. технология за слепване на няколко изображения в едно) имат редица предимства. Първо, броят на заявките към сървъра намалява поради намаляването на броя на файловете и, второ, снимките се зареждат и показват по-бързо като цяло.

Самият фон се показва от свойството background, което също така определя координатите на желания фрагмент. Параметрите на всеки фон са изброени разделени със запетаи и в в такъв случайредът им има значение. Имам нужда от горната част и Долна частблоковете не се припокриваха, затова ги поставих първи (пример 1).

Пример 1. Няколко фонови изображения

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

Първият фон показва горната граница на блока, вторият фон - долната, а третият - вертикалните граници.

Проверяваме в браузърите. Internet Explorer 8 изобщо не показваше никакви снимки, други браузъри (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) показваха рамката правилно (фиг. 3).

Ориз. 3. Рамков изглед в браузъра Safari

Използването на множество фонове прави ситуацията много по-лесна за разработчиците, особено при оформяне на блокове. Остана само едно малко нещо. Необходимо е браузърът IE 6–8 да престане да съществува.

• Урок

Вече се докоснахме до възможностите на модула CSS3 Backgrounds and Borders, разглеждайки работата със сенки (box-shadow). Днес ще поговорим малко за още един интересна възможност- използване на множество изображения във фонов режим.

Състав на фона

Има много причини, поради които може изобщо да искате да композирате няколко изображения във фонов режим, най-важните от които са:

• спестяване на трафик от размера на изображението, ако отделни изображенияобщо тежат по-малко от изображение със сплескани слоеве и
• необходимостта от независимо поведение на отделните слоеве, например при прилагане на паралакс ефекти.

Може да има и други основателни причини :)

Класически подход

Така че трябва да поставим няколко фонови изображенияедин над друг. Как обикновено се решава този проблем? Много е просто: за всяко фоново изображение се създава блок, към който се присвоява съответното фоново изображение. Блоковете са или вложени един в друг, или поставени в ред с подходящи правила за позициониране. Ето един прост пример:

Блок с класа "риболов" вътре в "русалка" е само за демонстрационни цели.

Сега малко стилове:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (височина:300px; ширина:480px; позиция: относителна;) .sample1 .sea (фон: url(media/sea.png) repeat-x горе вляво;) .sample1 .mermaid ( фон: url(media/mermaid.svg) repeat-x долу вляво; ) .sample1 .fish (фон: url(media/fish.svg) no-repeat; височина:70px; ширина:100px; ляво : 30px; горе: 90px; позиция: абсолютна; ) .sample1 .fishing ( фон: url(media/fishing.svg) без повторение горе вдясно 10px; )

Резултат:

В този пример има три вложени фона и един блок с риба, разположени до „фоновите“ блокове. На теория рибата може да се движи например с използвайки JavaScriptили CSS3 преходи/анимации.

Между другото, този пример за ".fishing" използва новия синтаксис за позициониране на фона, също дефиниран в CSS3:
фон: url(media/fishing.svg) без повторение горе вдясно 10px;
В момента се поддържа в IE9+ и Opera 11+, но не се поддържа във Firefox 10 и Chrome 16. Така че потребителите на последните два браузъра все още няма да могат да хванат рибата.

Множество фонове

На помощ идва нова опция, добавена към CSS3 – възможност за дефиниране на множество фонови изображения за един елемент. Изглежда така:

И съответните стилове:
.sample2 .sea (височина:300px; ширина:480px; позиция: относителна; фоново изображение: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); фонова позиция: горе вдясно 10px, долу вляво, горе вляво; фоново повторение: без повторение, повторение-x, повторение-x;) .sample2 .fish ( фон: url("media/fish.svg) ") без повторение; височина:70px; ширина:100px; ляво: 30px; горе: 90px; позиция: абсолютна; )
За да дефинирате множество изображения, трябва да използвате правилото за фоново изображение, изброявайки отделните изображения, разделени със запетаи. Допълнителни правила, също списък, могат да задават позициониране, повторения и други параметри за всяко изображение. Обърнете внимание на реда, в който са изброени изображенията: слоевете са изброени отляво надясно от най-горния до най-долния.

Резултатът е абсолютно същият:

Едно правило

Ако рибата не трябва да се отделя в отделен блок за последващи манипулации, цялата картина може да бъде пренаписана с един просто правило:

Стилове:
.sample3 .sea (височина:300px; ширина:480px; позиция: относителна; фоново изображение: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); background-position: горе вдясно 10px, долу вляво, 30px 90px, горе вляво; background-repeat: no-repeat, repeat-x ; )

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

В този случай това е еквивалентно на това описание:
фоново повторение: без повторение, повторение-x, no-repeat, repeat-x;

Още по-кратко

Ако си спомняте CSS 2.1, той дефинира възможността за описване на фонови изображения в кратка форма. Какво ще кажете за няколко изображения? Това също е възможно:

Sample4 .sea (височина:300px; ширина:480px; позиция: относителна; фон: url("media/fishing.svg") горе вдясно 10px без повторение, url("media/mermaid.svg") долу вляво repeat-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

Но имайте предвид, че сега не можете просто да пропуснете стойности (освен ако не съответстват на стойността по подразбиране). Между другото, ако искате да зададете цвета на фоновото изображение, това трябва да се направи в последния слой.

Динамични изображения

Ако композицията е статична или динамична най-много в зависимост от размера на контейнера, тогава множеството фонове очевидно опростяват дизайна на страницата. Но какво ще стане, ако трябва да работите с отделни елементи от композицията независимо от javascript (преместване, превъртане и т.н.)?

Между другото, ето пример от живота - тема с глухарче в Yandex:


Ако погледнете в кода, ще видите нещо подобно:

...

Блокове с класове "b-fluff-bg", "b-fluff__cloud" и "b-fluff__item" съдържат фонови изображения, които се припокриват. Освен това фонът с облаци непрекъснато се превърта, а глухарчетата летят по екрана.

Може ли това да бъде пренаписано с помощта на множество фонове? По принцип да, но при условие че 1) се поддържа тази функция в целевите браузъри и... 2) прочетете;)

Как да добавите динамика към множество фонове? В такава ситуация се оказва удобно, че във вътрешното представяне браузърът разпределя индивидуалните параметри на фоновите изображения според съответните правила. Например за позициониране има “background-position”, а за смени е достатъчно да промените само това. Използването на множество изображения обаче има цена - това правило (и всяко подобно) изисква да посочите позицията за всички фонове, дефинирани за вашия блок, и не можете да правите това избирателно.

За да добавите анимация към нашия рибен фон, можете да използвате следния код:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; функция animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) русалка X = 0; fishY = -10 + (10 * Math.cos(t * 0,091)); fishX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "top" + fishY + "px дясно" + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px, горе вляво"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Където
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60) ); )); ))();

И между другото, анимациите могат да се правят и с помощта на CSS3 Transitions/Animations, но това е тема за отделна дискусия.

Паралакс и интерактивност

И накрая, подобни маневри могат лесно да добавят паралакс ефекти или интерактивно взаимодействие с фона:

Множеството фонови изображения са полезни в такива сценарии, тъй като макар да говорим само за фона (а не за съдържанието), използването им ни позволява да избегнем разхвърлянето на html кода и DOM. Но всичко си има цена: не мога да се обърна към отделни елементикомпозиции по име, id, клас или някакъв друг параметър. Трябва изрично да запомня реда на елементите в композицията в кода и за всяка промяна във всеки параметър на който и да е елемент, всъщност трябва да слепя ред, описващ стойностите на този параметър за всички елементи и да го актуализирам за цялата композиция.

Sea.style.backgroundPosition = "top" + fishY + "px дясно" + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px, горе вляво";

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

Какво ще кажете за съвместимостта?

всичко модерни версии популярни браузъри, включително IE9+, поддържат множество изображения (можете да проверите например с caniuse).

Можете също да използвате Modernizr, за да предоставите браузъри, които не поддържат множество фонове алтернативни решения. Както пише Крис Койър в публикацията си за реда на слоевете, когато използвате множество фонове, направете нещо подобно:

Multiplebgs body ( /* Страхотни множество BG декларации, които надхвърлят реалността и imsourcess chicks */) .no-multiplebgs body ( /* laaaaaame резервен вариант */)
Ако сте объркани относно използването на JS за предоставяне обратна съвместимост, можете просто да декларирате фон два пъти, но това също има своите недостатъци под формата на възможни двойно зарежданересурси (това зависи от изпълнението на обработката на css в конкретен браузър):

/* множество bg резервни */ фон: #000 url(...) ...; /* Страхотни многобройни BG декларации, които надхвърлят реалността и мацките без източник */ фонов url(...), url(...), url(...), #000 url(...);

Ако вече сте започнали да мислите за Windows 8, имайте предвид, че можете да използвате множество фонове, когато разработвате приложения в стил метро, ​​тъй като той използва същия двигател като IE10.

P.s. По темата: Не мога да не си спомня феноменалната статия за принципа на цикадата.

Тагове: Добавете тагове

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

Пример 1. Три фона

Ако трябва отделно да зададете някакво стилово свойство за фона, като размер на фона, както в примера по-горе, тогава параметрите за всеки фон са изброени, разделени със запетаи. Резултат този примерпоказано на фиг. 1.

Ориз. 1. Фон с три изображения

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

Пример 2: Анимиран фон

Нека сега да разгледаме как да използваме една картина, за да създадем блок с рамка (фиг. 2). Ширината на блока е фиксирана, а височината варира в зависимост от обема на съдържанието на блока.

Ориз. 2. Ръчно рисувана рамка

Фигурата ясно показва горната и долната част, които трябва да бъдат изрязани графичен редактори го позиционирайте хоризонтално. Средната част е избрана така, че да се повтаря вертикално без шевове. Картината има подчертан повтарящ се модел, така че не би трябвало да има трудности при подчертаването му. Резултатът ще бъде готово изображение (фиг. 3). Карираното поле показва прозрачност; позволява ви да зададете цветен фон заедно с изображения и лесно да го променяте чрез стилове.

Ориз. 3. Изображение, подготвено за фон

Самият фон се показва от свойството background, което също така определя координатите на желания фрагмент. Параметрите на всеки фон са изброени разделени със запетаи и в този случай техният ред е от значение. Искаме горната и долната част на блока да не се припокриват, затова ги поставяме на първо място (пример 3). Цветът на фона се посочва последен.

Пример 3. Няколко фонови изображения

Първият фон показва горната граница на блока, вторият фон - долната, а третият - вертикалните граници. Последният е цветът, който се вижда в прозрачната централна част на блока (фиг. 4).

Използването на CSS 2.1 псевдоелементи ви позволява да имате 3 нива за фон, 2 изображения с фиксиран размер и множество сложни щрихи за едно HTML елемент. Този методзначително разширява възможностите за дизайн на уеб страници за всички браузъри, които поддържат CSS 2.1 псевдоелементи с позициониране. Не е необходима поддръжка на CSS3.

По същество създаването и работата с CSS псевдоелементи (:before и :after) е подобно на това как работите с вложени HTML елементи в рамките на целеви елемент. Но с едно съществено предимство – всичко се прави извън семантиката, без да се използват вложени HTML елементи.

За да създадете множество фонове и/или щрихи, псевдоелементите се преместват зад съдържанието и се прикрепват към правилната точка HTML елемент, използващ абсолютно позициониране.

Псевдо елементът не съдържа реално съдържание и е позициониран абсолютно. По този начин той може да бъде разтегнат върху всяка област на "родителския" елемент, без да се засяга съдържанието. За да направите това, можете да използвате комбинация от свойствата top, right, bottom, left, width и height.

Какви ефекти можете да получите?

Използвайки само един елемент, можете да получите паралакс, множество фонове (както цветове, така и изображения), изрязани фонови изображения, замяна на изображения, разширяеми елементи с изображения като контур, гъвкави изкуствени колони, изображения, които се простират отвъд границите на елемента, множество инсултии други популярни ефекти, които обикновено използват тагове за изображения и/или допълнително HTML маркиране.

На демонстрационните страници можете да видите прилагането на няколко популярни ефекта за дизайн на уеб страници с помощта на тази техника.

Освен това можете да използвате промени в стила за :hover, за да постигнете по-сложни ефекти.

Примерен код: Множество фонови изображения

Използвайки тази техника, можете да възпроизведете ефекта на паралакса с множество фонови изображения (както се използва на сайта Silverback), като използвате само един HTML елемент.

Елементът получава собствен фон и необходима подложка. Относителното позициониране на елемент действа като отправна точка за абсолютното позициониране на псевдоелементите. Положителната стойност на z-индекс ви позволява да регулирате позицията на псевдоелементите по оста z.

#silverback (position:relative; z-index:1; min-width:200px; min-height:200px; padding:120px 200px 50px; background:#d3ff99 url(vines-back.png) -10% 0 repeat-x ;)

И двата псевдоелемента са позиционирани абсолютно и разположени отстрани на елемента. Стойност на z-индекс от -1 поставя псевдоелемента зад слоя съдържание. По този начин псевдоелементите се поставят върху фона и очертанията на елемента, но цялото съдържание остава избираемо и кликано.

#silverback:before, #silverback:after ( position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; padding-top:100px; )

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

Свойството content ви позволява да добавите изображение като генерирано съдържание. Наличието на два псевдо елемента ви позволява да добавите 2 допълнителни изображения към елемента. Те могат да бъдат грубо позиционирани в псевдоелементи, като се използват други свойства като подравняване на текста и подплата.

#silverback:before ( content:url(gorilla-1.png); padding-left:3%; text-align:left; background:transparent url(vines-mid.png) 300% 0 repeat-x; ) #silverback :след (съдържание:url(gorilla-2.png); padding-right:3%; text-align:right; background:transparent url(vines-front.png) 70% 0 repeat-x; )

Примерен код: гъвкави изкуствени колони

Друго приложение на описаната техника е създаването на гъвкави колони с еднаква височина без използването на изображения или допълнителни свързани елементи.

HTML маркирането е много просто. Използваме класове за всички div елементвместо CSS селектори 2.1, които не се поддържат от IE6. Ако не е необходимо да се поддържа IE6, тогава могат да се използват селектори.

Контейнерът има ширина, определена като процент, относително позициониранеи положителна стойност на свойството z-index. Използването на overflow:hidden позволява на елемент да обгръща съдържанието на своите плаващи дъщерни елементи и скрива препълващите се псевдо-елементи. Цветът на фона осигурява цвета на една от колоните.

#faux (позиция: относителна; z-индекс: 1; ширина: 80%; поле: 0 автоматично; препълване: скрито; фон: #ffaf00; )

Използването на относително позициониране за наследствени елементи на div ви позволява да контролирате реда на колоните, независимо от външния им вид в оригиналното оформление.

#faux div ( position:relative; float:left; width:30%; ) #faux .main (left:35%) #faux .supp1 (left:-28.5%) #faux .supp2 (left:8.5%)

Другите две колони са създадени с помощта на псевдоелементи с фонове. Можете да използвате изображения като фон, ако е необходимо.

#faux:before, #faux:after ( content:""; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:33.333%; background:#f9b6ff; ) # faux:after ( ляво:66,667%; фон:#79daff; )

Примерен код: Множество удари

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

Елементът трябва да има относително позициониране и ширина на запълване, достатъчна, за да съдържа допълнителната линия, която ще бъде създадена от псевдоелементите.

#borders (position:relative; z-index:1; padding:30px; border:5px solid #f00; background:#ff9600; )

Псевдоелементът се позиционира на подходящото разстояние от границата на елемента, поставя се под слоя със съдържание, като се използва отрицателен z-индекс, и му се дава щрихът и фонът, от които се нуждае.

#borders:before ( content:""; position:absolute; z-index:-1; top:5px; left:5px; right:5px; bottom:5px; border:5px solid #ffea00; background:#4aa929; ) #borders:after ( content:""; position:absolute; z-index:-1; top:15px; left:15px; right:15px; bottom:15px; border:5px solid #00b4ff; background:#fff; )

Прогресивни подобрения и наследени браузъри

IE6 и IE7 не поддържат CSS 2.1 псевдо-елементи и игнорират всички декларации:before и:after. Те няма да донесат всички подобрения, но ще запазят основната функционалност.

Внимание при използване на Firefox 3.0

Firefox 3.0 поддържа CSS 2.1 псевдоелементи, но не поддържа тяхното позициониране. Поради тази частична поддръжка ефектите, които изрично зависят от свойствата на ширината или височината на псевдоелементите, могат да изглеждат ужасно. Няма алтернативен начинза Firefox 3.0, ако сте използвали свойствата за ширина или височина. Понякога някои подобрения могат да бъдат постигнати чрез добавяне на display:block към стиловете на псевдо елемента.

Преди да използвате техники, които изискват позициониране на псевдоелементи с помощта на свойствата за ширина или височина, трябва да обмислите колко важно е да поддържате Firefox 3.0 и процента на вашите потребители, които използват този браузър.

Този проблем е напълно разрешен в приложения, които използват абсолютно позициониране вместо свойства за ширина или височина.

Подобрения с CSS3

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

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

Бъдещето: CSS3 псевдо-елементи

Предложените подобрения на CSS3 псевдо-елементи (вижте документа CSS3 Generated and Replaced Content Module) включват обвързани псевдо-елементи (::before::before), множество псевдо-елементи (::after(2)), опаковане на псевдо-елементи ( : :outside) и възможност за вмъкване на псевдоелементи за заредени части от документа (::alternate).

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

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

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

Много фонови изображения

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

Blockimg( фон: url("img/img2.png"),/*най-горният фон и след това последователно*/ url("img/img3.png"), url("img/img1.jpg"); фонова позиция: 370px център, 120px 150px, център център;/*позиция на изображенията*/ background-repeat: no-repeat;/*повтаряне на картина*/ background-color: #444;/*ако е необходим фонов цвят*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 100px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; ) /*съкратена версия*/. blockimg ( фон: url("img/img2.png") без повторение 370px център, url("img/img3.png") без повторение 120px 150px, url("img/img1.jpg") без повторение център център; марж: 100px автоматично 15px; оразмеряване на полето: border-box; padding: 25px; width:700px; min-height: 300px; )

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

Следващото е посочено Допълнителни опциичрез индивидуални свойства: позиция, повторение, размер, ако е необходимо, след това цвят. Моля, имайте предвид също, че всички параметри се изписват разделени със запетаи, в същия ред като номера на снимката.

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

Фоново изображение чрез псевдо елемент

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

Blockimg( background: url("img/img1.jpg") no-repeat;/*element background*/ position:relative;/*positioning area*/ margin: 200px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; ) .blockimg::before( background: url("img/img1.png") no-repeat center center; bottom: 0; content: ""; height: 295px; ляво: 0; позиция: абсолютно;/*абсолютно позициониране*/ дясно: 0; горе: -150px; )

Обяснение.Всъщност всичко е много просто. Задаваме фона на основния елемент по обичайния начин. Следва ключът позиция собственост: роднина; , който определя областта за преместване на друг елемент, който е в основния елемент и има свойството position:absolute; .

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