Как закрепить фон в css

Как фон, написанный на html и css закрепить, что бы он не съезжал от появляющийся информации

написал задний фон на css и html, но он съезжает от информации которую использую в верстке, как сделать так, что бы он был на одном месте, и был самым последним слоем, а новая информация была на переднем]

Отслеживать
задан 10 фев 2022 в 17:22
qwe qwe qwe qwe qwe qwe
1 1 1 бронзовый знак
Читайте, что такое position и z-index в CSS
10 фев 2022 в 17:43

Добро пожаловать на Stack Overflow на русском! Пожалуйста, приведите пример своего кода, добавить в сообщение его можно нажав на кнопку править

10 фев 2022 в 17:45

2 ответа 2

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

✌ Используй следующий код:

Отслеживать
ответ дан 10 фев 2022 в 17:50
Data Name ID Data Name ID
18 3 3 бронзовых знака

http://htmlbook.ru/css/background-attachment Я так понимаю вам надо использовать это свойство

 body < background-image: url(images/help.png); /* Путь к фоновому изображению */ background-attachment: fixed; /* Фиксируем фон веб-страницы */ 

Отслеживать
ответ дан 13 фев 2022 в 13:41
11 5 5 бронзовых знаков

• html
• css
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

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

Как закрепить фон в css

По умолчанию, когда вы скроллите веб-страницу с фоном, фон прокручивается вместе с другими элементами. Иногда это уместно, а иногда хочется, чтобы изображение, заданное через background-image , всегда оставалось на виду. Для управления этим состоянием существует свойство background-attachment .

Значения background-attachment

Свойство может принимать три значения для настройки поведения фона:

• scroll (значение по умолчанию) — фоновое изображение перемещается вместе с другими элементами при скролле веб-страницы.
• fixed — значение фиксирует фоновое изображение, делая его нечувствительным к скроллу. При прокручивании страницы фон на заднем плане останется неподвижным.
• local — данное значение было добавлено из-за того, что в случае с локальным скроллом фон со значением scroll ведет себя как fixed. При значении local фон прокручивается вместе с содержимым элемента, и не прокручивается, если содержимое не скроллится (но прокручивается вместе с самим элементом).

Для лучшего понимания работы свойства взгляните на примеры ниже. Чтобы вы могли их сравнить, ваш браузер должен поддерживать все три значения background-attachment (надеемся, что при изучении CSS вы пользуетесь современным десктопным браузером!).

Эффект фиксированного фона на CSS

От автора: Простой шаблон, в котором используется CSS свойство background-attachment для создания эффекта фиксированного фона. Иногда вам не нужно писать какой-то ненормальный JavaScript код, чтобы создать креативные и хорошо выглядящие эффекты. Сегодня в центре нашего внимания всего одно CSS свойство — background-attachment. Вы можете зафиксировать фон в рамках области просмотра (background-attachment: fixed;).

Суть нового трюка заключается в том, что у нас есть один и тот же элемент (в данном случае телефон), который расположен в одном и том же месте для всех фоновых изображений. Таким образом, во время прокрутки страницы двигаются все элементы, за исключением телефона. Все, что вам необходимо, – это разные изображения одинакового размера и один общий элемент, расположенный в одном и том же месте.

Создание структуры

HTML структура является довольно обычной: каждый раздел содержит элемент с классом .content, в котором находятся заголовок с абзацем. Классы .img-1, .img-2 и т.д. используются, чтобы задавать разные фоновые изображения через CSS. Элемент с классом .cd-vertical-nav представляет собой стрелочную навигацию (которая видна только на больших экранах). Атрибуты data используются, чтобы в jQuery можно было определить разделы/элементы слайдера.

Как закрепить фон в css

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Урок 28. Неподвижный фон, прописанный с помощью стилей CSS. Размножающаяся и не размножающаяся картинка фона

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

Подобный эффект может создать некоторую иллюзию двуслойности, некоего пространства на ваших страницах.
Обычно эффекта неподвижной картинки фона добиваются с помощью постановки в таблицу стилей CSS следующих атрибутов: background-attachment: fixed; Речь идёт о таблице стилей CSS, которая у вас находится в отдельном документе с расширением .css

Есть несколько способов установить то, что нам нужно.

Выбираем картинку, которая будет у нас фоном. В данном случае я беру вот такую картинку (кликните по миниатюре, чтобы увидеть полный размер):

В документ стилей css, туда, где задаём параметры для BODY, вставляем такую конструкцию:

В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 1280 на 1024 px).

Примечание: Если у вас нет документа стилей css, то вам необходимо создать его, как указано в Уроке 8 — и прописать ссылку на документ стилей css в коде своей html-страницы, как указано в этом же уроке.

Итак, вот какие параметры мы задаём при помощи стилей:

— background-image: url(адрес картинки фона); — прописываем адрес нашей фоновой картинки 1280 на 1024 px.

— background-attachment: fixed; — задаём фону указание оставаться фиксированным, то есть, неподвижным.

— background-repeat: no-repeat; — задаём фону указание не размножаться.

— background-position: top; — задаём позицию фоновой картинке: устанавливаться по верхнему краю страницы.

Итак, мы вставили в документ стилей css, в BODY, вот эту конструкцию:

Я создала простую таблицу на 70 % экрана и поместила в ней текст и две картинки для наглядности. Вот что у нас получилось на странице: ПРИМЕР (чтобы увидеть эффект неподвижного фона, покрутите страницу вниз-вверх).

Попробуем поставить маленькую картинку, которая будет автоматически повторяться и заполнять всё пространство страницы, образовывая узор фона. Вот эта картинка:

При этом мы фиксируем весь фон, прописывая в таблице стилей css вот такую конструкцию:

Здесь мы задали только параметр: background-attachment: fixed; — то есть, прописали указание браузеру сделать фоновую картинку неподвижной. Поскольку мы не сказали картинке «не размножаться» — она должна у нас размножиться на весь экран.

Получится вот что: ПРИМЕР

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

— background:#e0ddd8 url(адрес фоновой картинки) — цвет под фоновой картинкой — бежевый, под цвет фона самой картинки. Это делается для того, чтобы не видно было перехода нашей картинки в фон (картинка занимает только часть экрана).

— no-repeat — картинка не размножается (стоит одна большая картинка с одним из моих любимых американских актёров — Робертом Дювалем).

— fixed — фон зафиксирован, то есть неподвижный.

— left top — выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта — слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете:
Похожие публикации:

1. Как проверить прошилась ли arduino
2. Как прошить atmega8 через arduino
3. Как развернуть картинку в css
4. Как разместить текст по центру css

Как сделать изображение на весь экран CSS?

Чтобы растянуть изображение на весь экран, ему необходимо задать min-height и width со значением 100%. А чтобы изображение не сжималось до размера меньшего, чем оригинальный, установим min-width со значением равным ширине картинки.

Как изменить размер картинки фона в HTML?

Для масштабирования фона предназначено свойство background-size, в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1.

Как сделать див на весь экран?

1. Немедленно избавьтесь от тегов font , вместо них используйте span , p , div и т. .
2. Стили пишите в отдельном CSS файле, или, на худой конец, в head .
3. В стилях для body , html пропишите: body, html
4. В стилях для div : .div

Как закрепить фон в CSS?

С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокрутке. Значение свойства: scroll — фон прокручивается вместе с содержимым (по умолчанию).

Как установить фон на CSS?

Для задания фонового цвета (именно сплошного цвета, не градиента и не картинки) используется свойство background-color. После него нужно поставить двоеточие и написать сам цвет. Это можно сделать по-разному. Например, с помощью ключевых слов, hex-кода, форматов rgb, rgba, hsl.

Как изменить размер изображения в CSS?

Чтобы изменить размера изображения в html средствами css используются свойства width(ширина) и height(высота) внутри атрибута style. Вы можете написать только width или height, и оставшееся неуказанное значение автоматически изменится с сохранением пропорций картинки.

Как сделать div на всю ширину страницы?

1. position: fixed; . Пример: онлайн линейка. .
2. единиц vw и vh div
3. начальной width и height тега html . По умолчанию height любого тега, в том числе html и body , равна его содержимому.

Как сделать картинку на фон в html?

1. Установка фонового рисунка на веб-страницу традиционно происходит через атрибут background тега . .
2. Добавление рисунка происходит путем установки адреса картинки через ключевое слово url.

Как растянуть картинку на весь экран в ворде?

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

Как растянуть картинку на весь экран в игре?

1. Проверьте комбинацию клавиш на клавиатуре. В большинстве игр используют сочетание клавиш «Alt» + «Enter» или «Alt» + «Tab». …
2. Нажмите правой кнопкой мыши по ярлыку игры. В открывшемся меню нажмите на «Свойство». …
3. Можно уменьшить разрешение экрана.

Как растянуть картинку в html?

Лучший способ растянуть изображение — это использовать свойство CSS3 «background-size». Вот пример, который использует фоновое изображение для body страницы, и устанавливает размер в «100%«. Поэтому рисунок всегда растянется и заполнит весь экран.

Как прижать footer к низу страницы?

Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html, body и . wrapper) на 100%. При этом контентному блоку . content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.

Как сделать шапку в HTML?

1. В описании #header удалите имеющиеся значения и обозначьте ширину и высоту вашего изображения. .
2. Вставьте картинку.

Как растянуть div на всю высоту родителя?

1 ответ Для того, что бы блок занял всю высоту родителя необходимо задать height: 100% , в данном случае родитель . wrap - body , отсюда вывод body необходимо задать минимальную высоту в 100%, но он то наследует от html , соответственно и ему так же.

Как закрепить фон в css

В статье мы рассмотрели 10 видов меню, по каждому написали инструкцию по настройке и дали рекомендации в каких случаях уместно его использование.

Материал посвящен дизайну меню — то, как меню работает и как оно выглядит. Если вам нужно разобраться как вообще создать меню сайта, добавить меню сразу на все страницы или сделать навигацию внутри страницы, пожалуйста прочитайте статью:

Как сделать меню сайта

Меню — набор ссылок на другие страницы сайта, либо на конкретные разделы одной страницы. Каждая ссылка — пункт меню. Меню необходимо для навигации: перехода между страницами или между разделами одной страницы.

Общие рекомендации
Меню должно помогать посетителю быстро найти необходимую информацию.
Меню должно быть лаконичным.
Пунктов меню не должно быть слишком много.
Оптимальное количество пунктов меню — 5 или меньше.
Названия пунктов меню лучше делать из одного слова.
Хорошо, если слова будут не слишком длинные.
Меню не должно быть тяжеловесным и отнимать внимание от контента.
Примеры хороших меню
Описание картинки
Прозрачное статичное меню поверх обложки

Как себя ведет:
Всегда находится вверху страницы, не отвлекает от содержания, при необходимости пользователь может легко к нему обратиться, так как оно расположено в привычном месте.

Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:

Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%

Посмотреть страницу с меню в браузере
Фиксированное меню

Как себя ведет:
Меню, которое всегда находится в поле зрения пользователя и он может обратиться к нему на любом месте на странице. У такого меню чаще всего прозрачный фон в начале страницы (на обложке), который меняется на непрозрачный во время скрола.

Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:

Основные настройки → Поведение позиционирования → Фиксация при скролле
Фон меню → Цвет фона меню — на выбор
Фон меню → Непрозрачность фона меню — 0%
Фон меню → Непрозрачность фона меню после начала скролла — 80%

Посмотреть страницу с меню в браузере
Два разных меню: одно вверху страницы, другое появляется при скролле

Как себя ведет:
Вариант, похожий на предыдущий, только при скролле появляется меню с другим содержимым. Например, в начале страницы меню содержит логотип, пункты (ссылки на разделы сайта) и ссылки на социальные сети. А когда пользователь начинает пролистывать страницу, появляется и остается в поле зрения меню с логотипом, призывом к действию и кнопкой обратного звонка.

Добавить на страницу два блока ME301. И задать им следующие параметры:

Первое меню (остается на обложке)
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%

Второе меню (появляется при скролле)
Основные настройки > Поведение позиционирования — Фиксация при скролле
Основные настройки > Появление меню при прокрутке через N пикселей — 600px
Фон меню > Цвет фона меню — на выбор
Фон меню > Непрозрачность фона меню — 70%

Первое меню
Первое меню
Второе меню
Второе меню
Посмотреть страницу с меню в браузере
Меню «гамбургер»

Как себя ведет:
Меню в виде трех полосок в углу экрана, при клике на которое раскрывается полная версия.

Для чего используется:
В случаях, когда необходимо, чтобы отвлекающие элементы были сведены к минимуму и внимание пользователя было обращено только к контенту. Довольно часто меню «гамбургер» используется в мобильных версиях сайта. Например, можно добавить обычное меню и назначить ему видимость «только для компьютера», затем добавить меню «гамбургер» и назначить ему видимость «только для мобильных».

Как настроить видимость блока только для мобильных устройств

Добавить на страницу блок ME401/402/403/404/405, настроить поведение позиционирования, цвет иконки меню и цвет фона самого меню и цвет фона для пунктов меню. В нашем примере параметры будут следующими:

Основные настройки → Поведение позиционирования — Фиксация при скролле
Иконка меню → Цвет — черный
Фон меню → Цвет фона закрытого меню — прозрачный
Фон меню→ Цвет фона открытого меню — белый

Посмотреть страницу с меню в браузере
Многоуровневое меню

Как себя ведет:
При клике на пункт меню появляется выпадающий список вложенных пунктов.

Для чего используется:
В объемных сайтах со сложной структурой.

Добавить пункты подменю у основного блока или использовать сочетание меню ME301(или любого другого с пунктами меню) и ME601.

Пункты подменю основного блока

Добавить на страницу любой блок меню, который содержит пункты меню.

Перейти в Контент блока → Список пунктов меню → нажать «Добавить пункты второго уровня» — напротив пунктов меню появятся иконки в виде символа плюс.

Нажать на иконку плюса напротив пункта к которому нужно добавить пункт второго уровня. Заполнить появившиеся поля названия пункта и его ссылку.

Чтобы добавить новый пункт подменю, нажмите на иконку плюса ещё раз.

Подпункты меню будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.

Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.

Блок ME601

Добавить на страницу блок ME301, настроить меню, как в примерах выше и добавить блок ME601 (Меню: второй уровень).

Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.

Как это работает :
1) В блоке ME601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.

Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.

Примечание : "#submenu:more" может быть любым словом, например: #submenu:portfolio или #submenu:aboutus