Продолжаем тему Фоновое изображение
Свойство CSS, которое мы сейчас рассмотрим, позволяет удерживать изображение на одном месте, при прокрутке страницы.
Вы наверное обращали внимание на подобные штуки, когда какая нибудь рекламная вставка или контактные данные висят на одном месте, как страницу не прокручивай.
Для достижения этой цели применяется свойство CSS background-attachment со значением fixed.
Фиксированное изображение, как-бы накладывается на все остальные элементы, находящиеся на странице, поэтому в html коде создаётся блок, который вмещает в себя все остальные элементы.
<body>
<div id="fix">
<div id="wrapper">
<h1>Заголовок</h1>
<p>Текст абзаца</p>
<h3>Подзаголовок</h3>
<p>Текст абзаца</p>
</div>
</div>
</body>
</html>Высота страницы увеличивается для того, чтобы в браузере появилась полоса прокрутки
height: 2000px;
Пример кода
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
body{
background-image: url(images/i.jpg);
}
#wrapper{
background: #ffe5b4;
border: 2px groove #cd5700;
width: 400px;
height: 2000px;
padding: 10px;
margin: auto;
}
#fix{ /*фиксированное изображение*/
background-image: url(images/i7.png);
background-position: 0px 100px;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="fix">
<div id="wrapper">
<h1>Заголовок</h1>
<p>Текст абзаца</p>
<h3>Подзаголовок</h3>
<p>Текст абзаца</p>
</div>
</div>
</body>
</html>Результат:
При прокручивании страницы, кнопка «Служба поддержки » будет оставаться на месте.
Желаю творческих успехов.
Перемена
Идет экзамен по технике безопасности в МАИ. Одну девушку спрашивает преподаватель, что такое шаговое напряжение. Ответ девушки потряс всех.
«Шаговое напряжение… . . ГМ. . Это. . Это напряжение между ног, когда держишься за оголенный конец… . «
Позиционируем фоновое изображение < < < В раздел > > > Как сделать изображение кнопки в Paint
Как делается фоновый цвет;
Фоновые изображения;
Размноженное изображение;
Прозрачные картинки и прозрачный цвет CSS;
