CSS множественный фон

Question

У меня есть сайт, и я хотел изменить его фон. Я хочу поместить фон сверху и снизу.

Вот код CSS:

div.bg_top {
  background-image: url('bg_top.jpg');
  background-repeat: no-repeat;
  background position: top center;
}

div.bg_bottom {
  background-image: url('bg_bottom.jpg');
  background-repeat: no-repeat;
  background position: bottom center;
}

HTML код:

<div class="bg_top">
  <div class="bg_bottom">
    Content Here.
  </div>
</div>

это правильно?

Answer 1

я бы рекомендовал использовать сокращенную комбинацию CSS для лучшей практики

.bg_top { background: url('bg_top.jpg') no-repeat top center; }

.bg_bottom { background: url('bg_bottom.jpg') no-repeat bottom center; } 

Answer 2

Чтобы избежать изменения HTML, вы также можете поместить один из фонов в html, а другой в body. И используйте минимальную высоту (высота для IE6), чтобы избежать наложения.

Answer 3

Как сказал Ланс, просто замените background position: на background-position:, оно должно работать нормально.

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

Answer 4

Должно работать, если вы исправите background-position :

background-position: center top;