Помогни ни да направим Uroci.net по - богат! Добави урок

Добавяне на фиксирана картинка за фон чрез CSS

prostotiq   трудност:    видян: 21056

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

<html>
<head>
<style type="text/css">
body {
background-image: url('smiley.gif'); /*избраното от вас изображение*/
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>

<body>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
<p>Тази картинка няма да се скролира до края на страницата</p>
</body>

</html>




Коментари (7)

Lentavia на 15.06 2007 в 09:56ч.
мисля , че на хората ще търсят :
background-attachment: fixed:center (май така беше) кадето я фиксира в център-а и каквото и да движат със скрол-а тя си стой In The Center :)
picha925 на 12.08 2008 в 18:25ч.
ма не става бе човек не става
pafel4y на 19.08 2008 в 02:27ч.
става ;)
suiiuris на 08.09 2008 в 10:48ч.
Lentavia е прав, че много хора ще се заинтересуват как да позиционират картинката командата е bacground-position: center; или top, bottom, left, right в интерес на истината center е най-малко използваемата опция, но това зависи от избрания дизайн разбира се.
Иначе урокърт е страхотен, лесен и полезен много добра работа.
Tohi на 13.08 2009 в 21:05ч.
стана само премахнах тези Тази картинка няма да се скролира до края на страницата това сигурно е за показно само мерси братле.
Tohi на 14.08 2009 в 00:46ч.
Lentavia по търсих в гоогле и командата е background-position: top center;
pen4o на 04.02 2010 в 02:05ч.
при мен стана,само че не ми е ясно,защо като дам background-position: center center; и не ми излиза точно в срадата...

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com