CSS-трюк: фиксируем большой бэкграунд относительно контента
В статье используется изображение из примера к статье How to: CSS Large Background.
Рассмотрим такую ситуацию — нужно создать страницу фиксированной ширины, к примеру, 900 пикселей, с контентом, расположенным горизонтально по центру относительно окна браузера. И необходимо на этой странице поместить большой фон (тоже горизонтально по центру), ширина которого значительно больше ширины нашего отцентрированного блока с контентом.
Фон размещается элементарно — его мы прицепляем тегу <body> и центрируем горизонтально.
При этом имеем следующую структуру кода:
HTML:
<html>
<body>
<div id="wrapper">контент</div>
</body>
</html>
CSS:
body {
background: url(background.jpg) 50% 0 no-repeat;
}
#wrapper {
width: 900px;
margin: 0 auto;
}
Для наглядности посмотрим пример №1.
Если вы станете сужать окно браузера, то с того момента, когда появится горизонтальная прокрутка, вы заметите, что фоновое изображение сдвигается влево относительно контента (за исключением браузеров IE6 и IE7). Наша задача — зафиксировать изображение.
Данную неприятность позволяет устранить один очень простой трюк. Суть его заключается в том, что к родительскому блоку контейнера, у которого задан фон, необходимо применить параметр минимальной ширины, равной ширине контентного блока. В нашем случае мы укажем минимальную ширину тегу <html>, поскольку он является «родителем» тега <body>, к которому мы прицепили фон. Т.е. всего-навсего добавляем такой стиль:
html {
min-width: 900px;
}
Вот и все. Теперь посмотрите пример №2 и попробуйте сузить окно браузера — фон больше никуда не съезжает, чего нам и требовалось добиться.
Комментарии (60)
Очень нужна помощь пожалуйста, создал фоновую картинку под мню с position: fixed;
и вот когда сужаю окно браузера фоновая картинка уезжает влево
что делать не представляю помогите
тест сайт
Попробуйте фиксированный блок сделать на всю ширину браузера и без фона, а в него уже вставить блок с position: absolute, у которого будет фон.
я извиняюсь
могли бы вы помочь с написанием кода
я мягко говоря со знаниями (в предбаннике)
Могу дать доступ к админке.
Я вот попробовал этот фон прикрутить к меню, что то получилось
в лево не уходит.
Но теперь не могу позиционировать этот фон.
Такую фишку увидел здесь
Но не могу повторить код.
Буду очень благодарен.
Вот простой пример — http://fiddle.jshell.net/UP34G/3/show/
С примером визуально понятно, не понятно как на моем сайте это реализовать.
Давайте так, я покажу как я прописываю, а Вы подскажите что не так.
HTML
CSS
Я не могу понять как правильно прописать фиксированный блок на всю ширину браузера и без фона, а в него уже вставить блок с position: absolute, у которого будет фон.
Посмотрите код примера и сделайте по аналогии.
Все получилось СПАСИБО
Еще вопрос может подскажите как прописать такую таблицу
http://imgur.com/OUKKa
Вот спасибо)
на многих сайтах этот вопрос без ответа))
Оказывается все просто.
Раньше приходилось в дочернем блоке с фиксированной шириной дублировать фоновое изображение. Там оно не съезжало при изменении ширины экрана.
Спасибо. Очень помогли. Два дня панель с ума сводила))) Тема в сети обсуждается…но конструктива мало. Спасибо за исчерпывающий ответ.
Спасибо, очень помогли!
И от меня большое спасибо!! Тоже спать спокойно не могла, меню-шка три дня с ума сводила…
Димоксы! Вы просто реально лучшие. Я перерыл пол-интернета для решения этой вроде незамысловатой проблемы, но кроме вас вообще никто нормального ничего не написал! Добавляю ваш сайт в избранное, спасибо! Так держать!
Прописал в код body { background-image: url(images/bg.jpg); /* Путь к фоновому изображению */ background-color: #c7b39b; /* Цвет фона */ } а толку ноль. Когда вместо body ставлю div? лишь тогда меняется фон на контенте , а мне нужен задний фон и ссылку на него поставить . Помогите!!! Мои сайты http://detskiy-konstruktor.com.ua/ и http://smartbetting.biz/