Css зафиксировать фон: background-attachment | htmlbook.ru

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

Ответы на пост (19) Написать ответ

bande

72

25.10.2012 10:44

картинка большая по размеру? если очень большая, то приказать становиться в 0 0 и no-repeat. будет сплошное фоновое изображение.

bande

72

25.10.2012 10:49

я идиот. подумал, что речь не об этом. прошу прощения..

btiz

2

25.10.2012 10:55

В том то и дело что большая: 1920х1080. Т. е. по сути это обоина которую нельзя повторить и которая полностью отображается на мониторах с разрешением 1920х1080. При меньших разрешениях с fixed она ,как и задумано, она астоматически обрезается но остается зафиксированной.

Без fixed она перемешается с контентом, но если контент больше 1080(а так почти всегда) то появляется пустая полоса снизу. Может есть какой js, который работает аналогично background-attachment:fixed, но не тормозит в браузерах?

Heliax

80

25.10.2012 10:59

Можно ссыль на сайт?

btiz

2

25.10.2012 11:16

Сайт на локалке. Там смотреть-то не на что. Как писал выше Div #all {background:url(images/background.jpg) fixed no-repeat top center;} внутри которого находятся дивы с контентом. Все.

btiz

2

25.10.2012 11:18

Повторюсь, c fixed все отображается как надо, но притормаживает в некоторых браузерах.

Есть ли альтернатива на js?

Heliax

80

25.10.2012 11:41

Скрипты тут не виноваты, скорее всего дело в рендеринге браузеров. Не исключаю такой момент (потому и попросил ссыль), что страница перегружена графикой с градиентами.
У меня была похожая ситуация: БГ на сайте был выполнен одной большой картинкой с плавным градиентом сверху вниз. При скроллинге наблюдались заметные притормозки (ступенчатые скачки). Поменял БГ и скроллинг заработал плавно.

Heliax

80

25.10.2012 11:43

Попробуйте экспериментальным путем выяснить слабое место и ликвидировать его.

btiz

2

25.10.2012 11:53

Сейчас скриптов вообще нет. Я же говорю, проблема только в браузере (опера), а конкретно в его несовершенстве рендеринга страниц. Убираю fixed: фон перемещается вместе с контентом — летает во всех браузерах. Зато в том же хроме все прекрасно работает и с fixed. Про скрипты я спросил потому, что может есть какой ява-скрипт, который зафиксирует фоновою картинку, подобно свойству Css fixed, и который не будет тормозит браузер.

Heliax

80

25.10.2012 12:03

Если рендер глючит, то вы хоть CSS-ом закрепите картинку, хоть JS-том, хоть на клей посадите — тормоза все равно будут. 🙂

Heliax

80

25.10.2012 12:10

Повторюсь: найдите слабое место и ликвидируйте его. Рендер в Опере вам все равно не уговорить работать нормально.

btiz

2

25. 10.2012 12:13

Нашел уже — это FIXED. Убираю его все летает.
Упрощенная структура сайта:

#all {background:url(images/background.jpg) fixed no-repeat top center; background-color:#fff;}
#content{width: 1200px;margin: 0 auto;}
}

Много контента

Т. е все элементарно просто и без извратов. Но в опре, чтоб ее притормаживает.

btiz

2

25.10.2012 12:14

Мда. Дивы не отобразились. Печально

btiz

2

25.10.2012 12:18

Упрощенная структура сайта #2:
http://srcboard.com/034v5a32

btiz

2

25.10.2012 12:09

В первом посте писал, что при изменении вот этого скрипта http://userscripts. org/scripts/review/54099, чисто субъективно пропадают небольшие подвисания и появляется плавность. Вот и думаю, может есть какие специальные ява-скрипты для этого дела.

Heliax

80

25.10.2012 12:14

Лично я подобных решений не встречал, требуемой цели всегда добивался своими силами. Мой принцип прост как три копейки — если что-то не работает (или работает криво) хотя бы в одном из основных браузеров, то этот кусок кода переписывается по-другому вплоть до решения проблемы.

Heliax

80

25.10.2012 12:21

Лично я не сторонник подобной реализации БГ (опять таки из-за косяков с отображением/скроллингом). Как по мне: верхняя часть страницы – одна картинка, нижняя часть страницы – другая. Середина заполняется либо серийным изображением, либо заливается подходящим цветом. Если нужен пример, могу дать ссыль.

btiz

2

25.10.2012 12:26

Я тоже не сторонник, но если такой БГ является неотъемлемой частью дизайна сайта, то я просто не вижу другой реализации.

Heliax

80

25.10.2012 12:28

Что же, в таком случае желаю вам удачного разрешения сложившейся ситуации.

Как создать фиксированный футер с помощью CSS

При помощи HTML и CSS можно создать много разных эффектов для сайта. Один из самых простых примеров — это фиксация элемента в любой части страницы при скроллинге. В этой статье мы расскажем, что собой представляет футер и как его зафиксировать без JavaScript. Также рассмотрим footer HTML примеры. 

Что такое footer 

Футер — это объект, который находится внизу сайта. Иногда такой элемент закрепляют на странице, чтобы при прокрутке он всегда был на виду. Эффект при этом будет такой же, как, например, у блока с чатом на сайте cloud.timeweb.com. При скроллинге он всегда остается на месте:

Далее рассмотрим несколько наглядных примеров, как зафиксировать HTML footer на странице. 

Пример 1

Создадим простой футер сайта в виде цветного блока с одним словом. 

Шаг 1. Напишем HTML-код с большим количеством абзацев, чтобы при прокрутке показать зафиксированный элемент: 

<html>
<head>
<style>
</style>
</head>
<body>
<h2>Простой пример зафиксированного подвала</h2>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<div>
  <p>Footer</p>
</div>
</body>
</html>

Шаг 2. При помощи CSS-кода выберем шрифт текста на странице и цвет фона, а также настроим расположение элемента:

<style>
body {
  font-family: PT Astra Sans;
   background-color: #e9e9f0;
   }
.footer {
  background-color: #2e34e5;
   position: fixed;
   right: 0;
   bottom: 0;
   text-align: center; 
   width: 99%;   
   font-size: 19px;
font-weight: bold;
  color: #fafaff;  
 }
</style>

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

Пример 2

Как сделать подвал сайта так, чтобы в нем были ссылки на внешние ресурсы? Об этом мы расскажем во втором примере: ссылки будут на фотографии бесплатного фотостока. 

Шаг 1. Добавим ссылки на три разных изображения, чтобы потом добавить их в footer HTML: 

<html>
<head>
<style> </style>
</head>
<body>
<h3>Пример зафиксированного подвала со ссылками на изображения</h3>
<div>
<div>
  <p>
    <a href="https://images. unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80">Фото1</a>
    <a href="https://images.unsplash.com/photo-1570092178365-4cd46034bb19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80">Фото2</a> 
    <a href="https://images.unsplash.com/photo-1604231751678-3f2b03928c10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80">Фото3</a>
  </p>
</div>
</div>
</body>
</html> 

Шаг 2. При помощи CSS-кода настроим размеры сайта и футер с тремя ссылками:

.wrapper {
  height: 1111px;
}
.footer {
 background-color: #aac5fa;
  position:fixed;
   right:0;
  bottom:0;
  width:99%;
  height: 101px; 
}
. text {
  float:none;
  font-size:29px;
  word-spacing:40px;
  padding-left:29px;
}
</style>

Шаг 3. Сделаем так, чтобы при наведении на ссылки менялся размер текста и цвет заливки: 

<style>
a:active {
  text-decoration: none;
}
a:link {
 text-decoration: none;
}
a.menu:hover {
  font-size:29px;
  background-color:#8eff8c;
}
</style>

В итоге получится такой footer HTML CSS: 

Пример 3

Теперь рассмотрим вариант, как сделать подвал сайта HTML с изображениями-ссылками на два популярных сайта в России. Тег footer не понадобится. 

Шаг 1. Напишем код с большим абзацем, добавим значки соцсетей «ВКонтакте» и «Одноклассники», а также укажем ссылки на их сайты: 

<html>
 <head>
  <style></style>
 </head>
 <body>
  <div>
   Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга.  Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга.    
  </div>
  <div>
  <div>
  <a href="https://vk.com/feed"><img src="https://cdn-icons-png.flaticon.com/512/25/25684.png" alt="VK icon"></a>
  <a href="https://ok.ru/"><img src="https://cdn-icons-png.flaticon.com/512/48/48971.png" alt="OK icon"></a>
</div>
  </div>
 </body>
</html>

Шаг 2. С помощью CSS-кода закрепим footer внизу страницы и выберем параметры по цвету и не только. Фон страницы будет серым, а объекта со значками — синим. 

<style>
   #wrapper {
    margin: 344 auto 433px; 
    width: 399px;
      }
body {
     background-color: e2e1eb;
   }
   #footer {
    background-color: #301fed; 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    height: 70px;
    padding-left: 29px;
        color: #f3f2ff; 
    width: 99%; 
   }
   .all-symbols {
   float:left;
  margin-top:19px;
  padding-left:199px;
  }
. symbol {
  color: #fffcfc;
  margin-top:6px;
  margin-left:29px;
  height:29px;
}
</style>

Шаг 3. Теперь сделаем так, чтобы фоновый цвет становился белым при наведении курсора на значки:

<style>
.symbol:hover {
  padding:2px;
  background-color:#fffcfc;
  }
</style>

В результате получится страница, на которой футер будет со значками «ВКонтакте» и «Одноклассники»: по ним можно перейти на сайты соцсетей.

Пример 4

Теперь рассмотрим, как сделать footer внизу страницы HTML с необычным эффектом. Блок будет спрятан под страницей — чтобы его показать, нужно обратить внимание на другой объект. В этом случае таким элементом будет красный квадрат с пунктиром. 

Шаг 1. В HTML-код добавим много абзацев: будет удобнее проверить фиксацию футера на странице: 

<style> </style>
  <h2>Чтобы найти footer, наведите курсор на красный квадрат</h2>
  <h3><p><p>A simple paragraph is for example here. </p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p></p></h3>
<div>
<div>
  <div></div>
<div>
<div>
<div>
       <h2>Спрятанный футер</h2>
</div>
</div>
</div>
</div>

Шаг 2. Теперь добавим следующий CSS-код, в котором определим параметры фона, футера на сайте и не только. Шрифт выберем PT Astra Sans, а фон будет голубым.

<style>
.wrapper {
  height: 1111px;
}
body{
background-color:#8f85ff;
font-family: PT Astra Sans;
text-align:center;
color:#e8e6fc;
}
.footer #block{
position:relative;
margin-top:2px;
width:99,99%;
 height:99%;
background: #120f2b;
}
.footer #text{
  Position: relative;
  right:201px;
  width:123px;
margin:14 auto;
 top:-51px;
}
.footer1{
            float:left;
    width:499px;
    }
.footer h2{
   color: #ffc9c9;
   font-family: PT Astra Sans;
   margin-top:69px;
   margin-left:39px;  
}
</style>

Шаг 3. Теперь создадим красный квадрат, который будет показывать спрятанный блок. При помощи значения dashed сделаем такой объект пунктирным, чтобы он выделить его еще больше. 

<style>
…
.footer #knopka{
    width:50px;
    height:50px;
    border: #d41542 8px dashed;
    margin:-3 auto;
    position:center;
}
. footer #knopka:hover{
    width:50px;
    height:50px;
    border: #d41542 8px dashed;
}
.footer {
    position: fixed;
    right:0;
    bottom:0;
    width: 99%;
    height: 2em;
    overflow:hidden;
    transition: all 2s ease;
}
.footer:hover {
    transition: all 2s ease;
    height: 9em;
}
…
</style>

В итоге выйдет страница, на которой спрятанный footer CSS будет плавно появляться и исчезать в любом моменте прокрутки. Такой эффект доступен на любой части страницы. Футер появляется только тогда, когда курсор наведен вниз окна.  

Итоги 

Мы рассмотрели 4 способа, как зафиксировать подвал сайта HTML. В основном нам помогли следующие CSS-свойства со значениями:

1. Position: fixed;
2. Right: 0;
3. Bottom: 0.

Вместо текста и ссылок в футере можно указать форму для поиска по сайту или запрос клиентам оставить свои контактные данные.

Но такие большие блоки могут мешать просмотру страницы. В этом случае поможет способ, который мы рассмотрели в 4 примере: можно создать небольшой элемент, скрывающий подвал HTML.  

11 CSS Fixed Backgrounds

Коллекция отобранных вручную HTML и CSS фиксированных фоновых примеров кода из codepen и других ресурсов. Обновление коллекции сентября 2019 года. 1 новый предмет.

1. Анимированные фоны CSS
2. Фоновые шаблоны CSS
3. Фон частиц CSS
4. Треугольные фоны CSS
5. Фоновые плагины jQuery

О коде

Сетка с фиксированным фоном

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: font-awesome.css

О коде

Фиксированное вложение фона

Исправлен фон с прокручивающимся контентом.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

background-attachment: исправлено;

Фон с свойством CSS background-attachment: исправлено;

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект прокрутки фона

Чистый CSS эффект прокрутки фонового изображения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Исправлено фоновое приложение

Добавление фона на чистом CSS исправлено в контейнере.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Прокрутка фона в CSS

Поездка в Сиэтл: прокрутка фона в CSS с background-attachment: исправлено;

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированные фоновые полные разделы

Определены полноэкранные разделы с чередующимися разделами, имеющими фиксированные / не прокручиваемые фоновые изображения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированный фоновый эффект

Простой шаблон, в котором используется свойство CSS background-attachment для создания эффекта фиксированного фона.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: jquery.js

О коде

Scroll Magic In Plain CSS

Если колесо мыши вниз… прокрутите вправо.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Слайд-шоу CSS в стиле ретро

Слайд-шоу

CSS с прикрепленным фоном : исправлено;

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Флип-книжка со свитками

Использование фоновых изображений и различных разделов, раскрывающих каждое фиксированное фоновое изображение, для создания эффекта флип-книги.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

исправлено — Класс CSS Tailwind

← Список классов CSS Tailwind

 

  <дел>
 

Предварительный просмотр

Проверка

. bg-fixed в реальном проекте

Щелкните один из приведенных ниже примеров, чтобы открыть визуальный редактор Shuffle с библиотекой пользовательского интерфейса, в которой используется выбранный компонент.

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Источник CSS

 . bg-fixed {
  background-attachment: исправлено;
} 

Дополнительные сведения в фоновом режиме CSS Tailwind

• .bg-auto
• .bg-крышка
• .bg-содержать
• .bg-нижний
• .bg-top
• .bg-центр
• .bg-левый
• .bg-левый-нижний
• .bg-левый-верхний
• . bg-право
• .bg-справа-снизу
• .bg-справа-вверху
• .bg-местный
• .bg-прокрутка
• .bg-без повтора
• .bg-повторить
• .bg-repeat-x
• .bg-повторить-y
• .bg-повторный раунд
• .