CSS и другой размер монитора?

Question

Я делаю сайт (WIP). Я столкнулся с некоторыми проблемами CSS, надеюсь, вы, ребята, можете мне помочь.

Моя текущая ситуация:

• У меня есть изображение, пусть оно называется bg.png шириной около 2500 пикселей, а в центре фонового изображения есть мой логотип.
• Мой сайт должен быть ориентирован на пользователей всех размеров (от 800 х 600 до 2400 х XXX).

Мои проблемы:

• Как централизовать фоновое изображение (bg.png), чтобы логотип всегда располагался по центру (по горизонтали) экрана монитора разного размера?

Answer 1

body { background: url('bg.png') 50% 50% no-repeat; }

Это поместит изображение в полноразмерное изображение в центр страницы, и пользователь увидит столько фонового изображения, сколько позволяет его окно браузера.

Answer 2

#your_img {
  width: 2500px; //In example 2500px
  margin: 50%;
  padding: -1250px; // 2500 divided by 2
}

Вероятно, он не работает в Internet Explorer, но вы можете использовать небольшой взлом с помощью position: absolute, как указано выше.

Answer 3

Если бы это был просто файл логотипа, который вы могли бы использовать

<style>
img
{
    position:absolute;
    left:-50%;
    top:-50%;
    z-index:-1;
}
</style>

Answer 4

#your_img {

   position: absolute;
   left: 50%;
   margin: -1250px;
}

Это решение необходимо, когда вы помещаете элемент img в другую коробку. Но будьте осторожны - это может изменить размер родительского ящика.