CSS-трюк: фиксируем большой бэкграунд относительно контента
В статье используется изображение из примера к статье How to: CSS Large Background. Рассмотрим такую ситуацию — нужно создать страницу фиксированной ширины, к примеру, 900 пикселей, с контентом, расположенным горизонтально по центру относительно окна браузера. И необходимо на этой странице поместить большой фон (тоже горизонтально по центру), ширина которого значительно больше ширины нашего отцентрированного блока с контентом. Фон размещается элементарно — его мы прицепляем тегу и центрируем горизонтально. При этом имеем следующую структуру кода: HTML:
CSS:
body < background: url(background.jpg) 50% 0 no-repeat; >#wrapper
Для наглядности посмотрим пример № 1. Если вы станете сужать окно браузера, то с того момента, когда появится горизонтальная прокрутка, вы заметите, что фоновое изображение сдвигается влево относительно контента (за исключением браузеров IE6 и IE7). Наша задача — зафиксировать изображение. Данную неприятность позволяет устранить один очень простой трюк. Суть его заключается в том, что к родительскому блоку контейнера, у которого задан фон, необходимо применить параметр минимальной ширины, равной ширине контентного блока. В нашем случае мы укажем минимальную ширину тегу , поскольку он является «родителем» тега , к которому мы прицепили фон. всего-навсего добавляем такой стиль:
html
Вот и все. Теперь посмотрите пример № 2 и попробуйте сузить окно браузера — фон больше никуда не съезжает, чего нам и требовалось добиться.
Смотрите также
CSS-трюк: двойные бордюры-разделители вертикального меню
28 комментариев
Когда при верстке требуется создать меню с разделителем, я использую замечательную технику, которую когда-то давно предложил Юрий «akella» Артюх. Недавно я столкнулся с очень похожей, но более сложной задачей — мне нужно было сверстать вертикальное меню, .
Верстка красивых тегов для сайта + бонус
25 комментариев
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить .
Зеленый свет CSS-свойствам при верстке под IE8 и выше
26 комментариев
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. .
Комментарии (60)
Очень нужна помощь пожалуйста, создал фоновую картинку под мню с position: fixed;
и вот когда сужаю окно браузера фоновая картинка уезжает влево
что делать не представляю помогите
тест сайт
Попробуйте фиксированный блок сделать на всю ширину браузера и без фона, а в него уже вставить блок с position: absolute, у которого будет фон.
я извиняюсь
могли бы вы помочь с написанием кода
я мягко говоря со знаниями (в предбаннике)
Могу дать доступ к админке.
Я вот попробовал этот фон прикрутить к меню, что-то получилось
в лево не уходит.
Но теперь не могу позиционировать этот фон.
Такую фишку увидел здесь
Но не могу повторить код.
Буду очень благодарен.
Фоновое изображение и неподвижный фиксированный CSS фон
В этом уроке мы продолжаем рассматривать свойства фона.
Пример того, как зафиксировать фоновое изображение в нужном месте:
| Текст документа Текст документа Текст документа Текст документа
|
По умолчанию фоновое изображение прокручивается вместе с другими элементами страницы.
background-attachment:fixed фиксирует фоновое изображение в заданной позиции.
background-position: задает точные координаты фона по горизонтали и по вертикали.
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
CSS позиция фона 
Как зафиксировать фон 
Фиксированный CSS margin
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Неподвижный фон в 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 в таблице вы пропишете:
HTML\CSS → Как зафиксировать фон при прокрутке
С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокрутке. Значение свойства:
scroll — фон прокручивается вместе с содержимым (по умолчанию).
fixed — фон не прокручивается, зафиксирован на одном месте.
body < background-image: url('texture.jpg'); background-repeat: no-repeat; background-attachment: fixed; >