Ограничить фон от скольжения за крайний левый край экрана

Question

Ограничить фон от скольжения за крайний левый край экрана

0

Извините, я не знаю, как более четко сформулировать этот вопрос, но в настоящее время мое background-position веб background-position страницы настроено на center. Когда я изменяю размер окна, он остается в самом центре, а когда окно меньше фонового изображения, изображение STAYS центрируется, поэтому и левый, и правый края обрезаются. Проблема, с которой я сталкиваюсь, заключается в том, что мои блоки содержимого div останутся в центре, когда я использую margin:auto; , но при изменении размера окна до ширины, меньшей width:700px; , край левого края коробки остается в пределах видимости, а самый правый скрывается за рамкой окна. Мне очень трудно объяснить, извините, если я не понимаю. Я очень новичок в веб-разработке. Примеры скриншотов:
http://puu.sh/7jnNV.jpg: Хорошо! Все центрировано и выровнено
http://puu.sh/7jnPO.jpg: Плохо! Фоновое изображение остается в центре по ширине окна, но поле div останавливается на крайнем левом краю и затем убегает с другой стороны:
http://puu.sh/7jnSN.jpg: Поскольку ширина фиксирована, она бежит со стороны фона, потому что она смещена от центра фона.

Вот код веб-страницы:

<head>
<style>
html, body {
    min-height: 100%
}
body {
    background-color: #ffffff;
    background-image: url(banner.png), url(footer.png), url(filler.png);
    background-position: center top, center bottom, center center;
    background-repeat: no-repeat, no-repeat, repeat-y;
}
</style>
</head>

<body>
<style>
div.content
{
width:700px;
padding:10px;
border:2px solid #004688;
margin:auto;
margin-top:400px;
margin-bottom: 135px;
}
</style>
<div class="content">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</div>
</body>

Поэтому я считаю, что самое простое решение - остановить фон от скольжения по левому краю экрана, и таким образом все остается по центру относительно друг друга. Но я не знаю, как это сделать, а googling бесполезен, так как я не знаю, что я даже говорю о lol; c

Tony White 05 март 2014, в 04:07

Источник

Теги:

html

css

background

webpage

2 ответа

Ещё вопросы

Luke S · Answer 1 · 2014-03-05T01-00-00.000Z

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Возможно, используйте background-size для динамического масштабирования изображения? Вы можете использовать cover или 100%

Iqbal · Answer 2 · 2014-03-04T23-26-00.000Z

Примените фон в контейнере div.

Высота и ширина контейнера div будут такими же, как и у фона.

Теперь центрируйте контейнер div как по горизонтали, так и по вертикали, используя CSS.

Я попробую, я быстро попытался поместить фон в div, но я думаю, что сделал это неправильно, потому что не смог заставить его работать. Имеет смысл, что это должно работать по-вашему, поэтому я буду продолжать пытаться.
Div не имеют высоты по умолчанию. Возможно, ваш контейнерный блок пуст или высота не указана. Вы должны добавить высоту к контейнеру div.