Фиксированное изображение

Продолжаем тему Фоновое изображение

Свойство 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>

Результат:

Результат применения свойства css - background-attachment: fixed;

При прокручивании страницы, кнопка «Служба поддержки » будет оставаться на месте.

Желаю творческих успехов.


Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

Идет экзамен по технике безопасности в МАИ. Одну девушку спрашивает преподаватель, что такое шаговое напряжение. Ответ девушки потряс всех.
«Шаговое напряжение… . . ГМ. . Это. . Это напряжение между ног, когда держишься за оголенный конец… . «

Позиционируем фоновое изображение < < < В раздел > > > Как сделать изображение кнопки в Paint
 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *