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

Question

У меня есть фон, который повторяется и позиции как это:

body
{
    background-image: url(images/background.jpg);
    background-repeat: repeat;
    background-position: 50% 50%;
}

Это отлично работает. Теперь я хочу центрировать содержимое страницы. Если у меня есть изображение размером 1000x560 пикселей, я бы хотел, чтобы оно было выровнено, чтобы соответствовать фону, который теперь центрирован в браузере.

Лучший подход?

Answer 1

для вашего содержимого div вы можете использовать position:absolute. напишите так:

.content{
 width:1000px;
 height:560px;
 top:50%;
 margin-top:-230px;
 left:50%;
 margin-left:-500px
}

Answer 2

Если вы теперь применили свое центрированное фоновое изображение к тегу body, вы можете объявить контейнер так, чтобы он находился в центре вашей страницы следующим образом:

#container {
width: 1000px;
height: 560px;
margin: 20% 0 auto;
}

Это может создать контейнер, расположенный прямо над вашим фоном, и его размер будет изменяться в зависимости от размера вашего окна. Единственное, что я не могу отработать для вас, - это процент максимальной маржи, вам, возможно, придется поиграть с этим, чтобы получить правильное значение. В этом случае я объявил это как 20%, также отметьте, что я только проверял это в FF

Дайте мне знать, как это работает, и если я правильно вас понял.

Приветствия