Как зафиксировать background css

Фоновое изображение и неподвижный фиксированный CSS фон

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

Пример того, как зафиксировать фоновое изображение в нужном месте:

По умолчанию фоновое изображение прокручивается вместе с другими элементами страницы.

background-attachment:fixed фиксирует фоновое изображение в заданной позиции.

background-position: задает точные координаты фона по горизонтали и по вертикали.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS позиция фона Как зафиксировать фон Фиксированный CSS margin

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Неподвижный фон в CSS? – Не вопрос!

Как зафиксировать фон для div?

Есть такая вот верстка лендинга, не резиновая, статичная: http://codepen.io/emelyanova/pen/eNdmrJ Проблема в том, что при уменьшении размера экрана Фон div не фиксируется, появляется область белого цвета. Я думала это отступы, но не попала. Я игралась с background-size — не помогает. Прошу, укажите на мою ошибку. Задача: сделать так, чтобы фоны div не двигались от масштабирования окна.

Отслеживать
задан 20 мая 2015 в 11:38
336 4 4 серебряных знака 16 16 бронзовых знаков

Приведите пожалуйста другой пример или скриншот, так как картинки не подгружаются и не понятно в чем проблема.

20 мая 2015 в 11:51
Если реч идет о header , то уберите background-position: 50% 50%;
20 мая 2015 в 11:59

Картинки догрузила. background-position: 50% 50%; — убрала. Изначально его и не было, не работала все равно. Это я от отчаянья.

20 мая 2015 в 12:36

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Для того чтобы убрать белый отступ, нужно задать минимальную ширину для body , тогда при достижение заданного расширения экрана, background перестанет уменьшаться и соответственно белой полосы не будет.

body

Отслеживать
ответ дан 20 мая 2015 в 16:12
Ihor Tkachuk Ihor Tkachuk
1,296 1 1 золотой знак 8 8 серебряных знаков 12 12 бронзовых знаков

Посмотрите на повторение фонового изображения, у Вас стоит no-repeat. Проверьте, не мало ли изображение, когда вы применяете масштаб. Если не хотите повтора фонового изображения, используйте: background-size:cover или background-size:contain в зависимости от ситуации

Понял я почему у Вас так. установите в background-size значение в 100%

Отслеживать
ответ дан 20 мая 2015 в 12:01
9 3 3 бронзовых знака
Изначальный размер 1500 пикс. Более чем достаточно. Спасибо за ответ. Буду рада дальнейшему общению.
20 мая 2015 в 12:37
желательно, чтобы выложили скриншот
20 мая 2015 в 12:39

Прошу, уточните, скин чего? ошибки? Исходника? i.imgur.com/rkxgl0s.jpg — исходник. prntscr.com/77btvu — баг.

Как зафиксировать background css

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Фиксированный фон в CSS (background-attachment)

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

Так вот, наша сегодняшняя задача сделать такую же фишку. Как разместить данное изображение (всегда предварительно оптимизируйте изображения перед загрузкой) в определенном месте мы уже знаем, но как заставить его зафиксироваться?! Давайте приступим и попробуем это сделать, как на данном скрине.

Теперь давайте разберемся куда мы можем поставить данное фоновое изображение. У нашего тега body, а также у блока div и Н1 уже есть фоновые картинки, а как мы знаем 2 изображения поставить нельзя (смотрите прошлые уроки). Но все очень просто: мы можем создать еще бесчисленное количество блоков div с другими идентификаторами внутри тега body, на фон которого поставить изображение. Для удобства в написании можно использовать аналогичный сдвиг строк, чтобы видеть где какой блок начинается и заканчивается, а также какой блок внутри другого.

Теперь давайте пропишем outline нашему новому блоку, чтобы видеть его границы. По окончанию работы это свойство можно просто удалить.

Вот появился наш блок, который по вертикали занял расстояние равное высоте контента, а по горизонтали все свободное пространство тега body. Но мы не можем проверить нашу работу, так как для этого мы должны прокрутить страницу браузера, а такой возможности пока у нас нет. Для этого давайте увеличим размер нашего блока с 421px до 991px, чтобы появилась полоса прокрутки.

И теперь, когда появилась полоса прокрутки мы на фон нашего блока div ставим это изображение. Запрещаем повторение и указываем положение.

Теперь если обновить браузер появилось наше изображение, но при прокрутке окна оно зафиксировано на месте и не прокручивается вместе с окном. Для этого нам необходимо прописать новое свойство, которое закрепит изображение относительно окна браузера.

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

Ну и в конце нашего занятия давайте вновь сократим наши свойства уместив все в одну строчку. Мы просто пишем общее свойство background и далее просто перечисляем в строчку все его значения! Все просто!

Свойство background-attachment

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, quasi, aperiam, voluptates dolor facere animi sit architecto neque repellendus veniam ipsa temporibus perferendis culpa ipsum consequatur aliquam consectetur omnis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, quasi, aperiam, voluptates dolor facere animi sit architecto neque repellendus veniam ipsa temporibus perferendis culpa ipsum consequatur aliquam consectetur omnis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, quasi, aperiam, voluptates dolor facere animi sit architecto neque repellendus veniam ipsa temporibus perferendis culpa ipsum consequatur aliquam consectetur omnis!

Фон фиксируется относительно области просмотра. Создается эффект «параллакс» — фоновое изображение двигается при скролле

CSS background-attachment Property

A background-image that will not scroll with the page (fixed):

More «Try it Yourself» examples below.

Definition and Usage

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

More Examples

Example

A background-image that will scroll with the page (scroll). This is default:

Example

How to create a simple parallax scrolling effect (create an illusion of 3D depth):

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

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

Что такое footer

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

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

Пример 1

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

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

Простой пример зафиксированного подвала

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional

This text is additional


 
Footer

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

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

Пример 2

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

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

 
 



Пример зафиксированного подвала со ссылками на изображения


 
 
Фото1 
Фото2 
Фото3 




 

Шаг 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;
>

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

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

Пример 3

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

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

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

 
 

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

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

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

Пример 4

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

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

 
 
Чтобы найти footer, наведите курсор на красный квадрат
 
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.



 



 
Спрятанный футер

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

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

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

Итоги

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

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

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