Тъй като от доста време не сме писали урок тип "малък и спретнат", а бях обещал периодично да виждате такива на нашите страници, реших да седна и да поправя грешката.
Вероятно сте обърнали внимание на заглавието и се чудите защо е на английски. Ами това е така поради факта, че този термин е изключително труден за превод и поне аз не успях да се сетя за вариант по-къс от няколко изречения. Ето защо реших да оставя заглавието по този начин, който всъщност намирам за достатъчно разбираем. Но тъй като това е статия насочена към вас читателите, с няколко думи ще се опитам да обясня какво е "scalable full body background".
Предполагам сте виждали сайтове с огромни и сложни бекграунди, които изпълват целия ви екран. За жалост, повечето от тях са оптимизирани за определени резолюции, като веднага мога да дам пример с кофти бекграундите на cinefish.bg, когато правят промоция на филм. Нищо против сайта, просто могат да наблегнат малко повече на изображенията, които заемат голяма част от екрана. Все пак има и друг тип сайтове, които разполагат с бекграунди, оптимизирани за всякакви резолюции. Веднага давам още един български пример с kia.bg. Там използват метод, близък до единия от двата, за които смятам да пиша днес. И ако съм ви грабнал вниманието, четете надолу!
Всъщност техниките, за които ще пиша днес обикновено се изпълняват с Flash или се ползва малко javascript, за да се запазват пропорциите на изображението (както са направили в kia.bg). Това наистина са най-добрите методи, но те не винаги са оптимални за дадена ситуация. Например не желаете сайтът ви да има какъвто и да е флаш или js, или пък просто не знаете изобщо какво означават тези думички. Ето защо след кратка консултация с колегата Павел Иванов, реших, че ще е най-удачно да представя 2 варианта на scalable full body background при това само с CSS. Разгледайте демото отдолу, като за да видите ефекта най-бързо, ще трябва малко да си поразтягате браузъра насам-натам.
| View DemoDownload |
Предполагам вече сте си избрали един от двата метода, но все пак имайте предвид няколко неща. Първо, двата метода имат плюсове и минуси и са подходящи за различни ситуации, така че е добре да се знаят и двете "техники". Второ, огромно значение има какво изображение ще сложите за фон. Все пак преди да лепнете каквото и да е, трябва да помислите от какви хора ще бъде видимо, кои ще са най-често използваните резолюции и т.н., за да подготвите всичко както трябва.
И така, време е да преминем към същността на урока, а именно двата метода, които съм подбрал. В първия от тях ще използваме <img> таг, а във втория обикновен <div> с изображение прикачено за бекграунд.
Първи метод
Тук, както вече казах ще използваме <img> таг, поради свойството му да се разпъва, колкото може.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/first_method_style.css" type="text/css" /> <title>Scalable Full Body Background само с CSS</title> </head> <body> <div id="bg"><img src="img/bg.jpg" alt=""/></div> <div id="container"> <div id="content"> <h2>Съдържание</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper viverra orci non sollicitudin! Pellentesque quis diam sem. Vivamus eu orci purus. Integer ipsum urna, auctor placerat porta eget, malesuada ac lacus. Fusce sit amet mattis lorem. Integer metus sem, semper scelerisque lobortis eu, gravida ut lectus. Nulla ac purus non erat fermentum consequat. Mauris velit ligula, vehicula sit amet placerat quis, consectetur at nisi. Vivamus blandit viverra molestie. Vestibulum at velit dignissim neque porta venenatis. Suspendisse tempor condimentum sapien ut tristique. Nunc eu turpis mi. Quisque id magna vel purus vehicula pretium. Vestibulum at dui felis.</p> <p>Nunc pellentesque purus sed diam semper quis rutrum nunc placerat. Morbi et nisl justo! Praesent lacinia nisi id sem lobortis gravida. Suspendisse risus nisl, imperdiet cursus tempor id, ullamcorper vel felis. Aliquam placerat sapien at nunc euismod fringilla? In viverra suscipit nisl, non venenatis tortor laoreet sed! Fusce justo augue, molestie vitae imperdiet congue, faucibus vel justo. Pellentesque lobortis congue scelerisque. Suspendisse tincidunt mauris id erat rutrum placerat vitae sed metus. Donec nec tellus interdum eros malesuada ullamcorper. Mauris pellentesque nulla odio. Nullam vitae diam odio. Morbi vitae nulla id felis sollicitudin volutpat.</p> </div> </div> </body> </html>
Както виждате, въпросният img е набутан в div, който стои преди съдържанието. Идеята е да позиционираме това изображение най-отдолу, да го разпънем максимално и да лепнем цялото съдържание отгоре. Това става с няколко реда код:
#bg img {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
#content {
position: relative;
z-index: 10;
}
Елементарно, нали? Целият CSS може да видите отдолу.
CSS
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 20px;
background: #fff;
color: #666;
}
#bg img {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
#container {
padding: 50px 0;
}
#content {
position: relative;
z-index: 10;
width: 560px;
margin: 0 auto;
padding: 20px;
background: #fff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#content p {
margin: 0 0 10px;
}
#content h2 {
margin: 4px 0 10px;
}
Какво прави този метод? Просто е. Тук имаме изображение, на което даваме ширина и височина 100% и освен това позиционираме абсолютно спрямо body, така че да следва линиите на браузъра ви. Т.е. в този случай вие винаги ще виждате цялото изображение и то ще приема размерите на браузъра ви, като в определени ситуации може да не изглежда много добре (ако имате шантава пропорция например). Все пак тази загуба на пропорция рядко се случва, тъй като всички резолюции са горе-долу подобни. Важно е да се отбележи и че при този метод големината на картинката не е от особено значение, тъй като тя ще се разпъва на целия екран винаги. Естествено, колкото по-голяма толкова по-добре, за да не гледаме натрапчиви пикселизирани изображения.
Втори метод
Тук ще използваме div, на който ще сложим за бекграунд нашето изображение. HTML-ът е 99% сходен с този от примера горе, с единствената разлика, че в div-a нямаме img.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/second_method_style.css" type="text/css" /> <title>Scalable Full Body Background само с CSS</title> </head> <body> <div id="bg"></div> <div id="container"> <div id="content"> <h2>Съдържание</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper viverra orci non sollicitudin! Pellentesque quis diam sem. Vivamus eu orci purus. Integer ipsum urna, auctor placerat porta eget, malesuada ac lacus. Fusce sit amet mattis lorem. Integer metus sem, semper scelerisque lobortis eu, gravida ut lectus. Nulla ac purus non erat fermentum consequat. Mauris velit ligula, vehicula sit amet placerat quis, consectetur at nisi. Vivamus blandit viverra molestie. Vestibulum at velit dignissim neque porta venenatis. Suspendisse tempor condimentum sapien ut tristique. Nunc eu turpis mi. Quisque id magna vel purus vehicula pretium. Vestibulum at dui felis.</p> <p>Nunc pellentesque purus sed diam semper quis rutrum nunc placerat. Morbi et nisl justo! Praesent lacinia nisi id sem lobortis gravida. Suspendisse risus nisl, imperdiet cursus tempor id, ullamcorper vel felis. Aliquam placerat sapien at nunc euismod fringilla? In viverra suscipit nisl, non venenatis tortor laoreet sed! Fusce justo augue, molestie vitae imperdiet congue, faucibus vel justo. Pellentesque lobortis congue scelerisque. Suspendisse tincidunt mauris id erat rutrum placerat vitae sed metus. Donec nec tellus interdum eros malesuada ullamcorper. Mauris pellentesque nulla odio. Nullam vitae diam odio. Morbi vitae nulla id felis sollicitudin volutpat.</p> </div> </div> </body> </html>
А ето и CSS-ът, който прави "магията":
#bg {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center top;
}
#content {
position: relative;
z-index: 10;
}
Тук отново разликите с предния метод са нищожни. От голямо значение е позиционирането на бекграунда - той задължително трябва да бъде центриран по хоризонтала, в противен случай няма да усетите нужния ефект. Ето и пълния CSS.
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 20px;
background: #fff;
color: #666;
}
#bg {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center top;
}
#container {
padding: 50px 0;
}
#content {
position: relative;
z-index: 10;
width: 560px;
margin: 0 auto;
padding: 20px;
background: #fff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#content p {
margin: 0 0 10px;
}
#content h2 {
margin: 4px 0 10px;
}
При този метод от изключително значение е големината на картинката, тъй като тя вече не се разпъва спрямо екрана, а той по-скоро играе ролята на маска, която показва част от картинката. Иначе казано, в този случай ви трябва наистина голямо изображение, за да покриете дори най-големите резолюции и когато се падне потрбител с по-малка резолюция, той ще вижда част от изборажението. Този метод също има няколко особености (забележки), които трябва да се вземат под внимание. Първо, тук не може да използвате малки картинки, защото ако обърнете внимание на CSS-а, ние разпъваме самия div на 100%, но не и изображението в него. Второ - ако искате да го използвате в сайтове с дълъг вертикален скрол, няма да е лошо да обработите фоновото изображение предварително, защото понякога съдържанието може да е изключително дълго и в един момент бекграунда ви да... свърши.
Между другото използването на този метод по описания горе начин не е единствен вариант. Другият е да махнете <div id="bg"> и да сложите бекграунда на html и body таговете. Тогава CSS-а би изглеждал така:
html, body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 20px;
background: #fff url(../img/bg.jpg) no-repeat center top;
width: 100%;
height: 100%;
color: #666;
}
И по този начин ще работи без проблем (дори на IE6, което не може да се каже за останалите варианти), така че чувствайте се подканени да търсите нови по-логични, по-лесни и по-удобни решения!
Заключение
Сами виждате, че и двата метода имат своите особености, които някои биха нарекли минуси. Всъщност те могат да се окажат доста полезни понякога, тъй като са изключително опростени, интегрират се във всеки сайт бързо и лесно и крайният резултат е повече от задоволителен. Препоръчвам да си поиграете добре преди да ги използвате и най-вече да подбирате и обработвате много добре фоновите изображения преди да ги сложите, защото те все пак ще играят голяма роля в цялостната визия на сайта.
Браво за урока полезен и ще влезе в употреба.
Ще се радвам ако има и още уроци и ако са така добре обяснени.
.....чакаме следващия урок.
Много добър урок, но ако имаме динамично съдържание и то е по-голямо от височината на документа, какво става - картинката не се разпъва.
Да, в статията споменах за тази особеност. Решението е просто - и при двата метода заменяме position: absolute с position: fixed и нещата се получават :).
туко що пробвах вариант 1... работи но, но без height:100%; e добре защото не мачка картинката само трябва да се оптимизират предварително за ресолюциа 4:3 за не изкарва празно място на квадратните монитори :)
а вариант 2 не съм го разглеждал добре.. не е много scalable :)
мерси все пак :)
Да, в някои случаи определени стойности могат да бъдат излишни :).
Иначе за вариант 2 си прав - реално не е scalable, но създава подобно усещане. Исках да направя сравнение между двата, за това реших да го включа.
Здравейте.
Урока е наистина много полезен. Даже използвах първия метод и стана доста добре {:
Искам да попитам дали има начин да се съчетае Scalable Full Body Background и функцията при скролване фона да бъде фиксиран. (съдържанието на сайта да се скролва, фона не) ?
хмм...
Може и е много лесно, даже писах по-нагоре в коментарите :). Вместо position: absolute се слага position: fixed. На първия метод съответно на img елемента, а на втория на div-a.
Поздравления за сайта. Има полезни неща. Keep forward.
Конкретно за този урок. Не сте споменали `background-size' от CSS 3.
Моето мнение по темата е че подобно нещо е сгрешен дизайн. Това говори че дизайнера не познава възможностите на HTML/CSS, което не е много хубаво. Аз лично този "проблем" съм го решавал по следния начин. Избирам си цвят близък до цвета с който свършва снимката. Слагам този цвят за фон. Фоновото изображение го слагам центрирано по x и го фиксирам така че като се скролира да не мърда.
Успех със сайта!
Идеята на урока е, кодът да е работещ навсякъде, за това и всичко е опростено толкова :).
Иначе ако снимката е предварително обработена - няма проблеми, но ако е както в примера по-горе, то тогава е добре да се прибегне до подобно решение. А и имай предвид, че дизайнерът не е длъжен изобщо да познава HTML/CSS... В случая имаш проблем и решение - идва ти такъв дизайн и този урок показва решението на проблема :).
Благодарим за пожеланията!