Наслоение изображений в CSS - можно ли разместить 2 изображения в одном элементе?

Единственный способ - использовать другой контейнер. Каждый элемент может содержать только одно фоновое изображение.

Короче говоря, это невозможно. Вы можете это сделать, но вам нужно добавить второй объект HTML на страницу, чтобы заставить его работать. Так, например, поместите блок div прямо под вашим телом и назначьте второй фон этому объекту.

Надеюсь это поможет!

Используйте абсолютное позиционирование и z-index, чтобы второй элемент оказался сверху.

Не забывайте, что вы можете применять стили к HTML-элементу:

html {
background: url(images/whatever.gif);
}

Многослойные фоны являются частью Рабочий проект CSS3, но, насколько мне известно, их поддержка ограничена браузерами на основе WebKit / KHTML, такими как Safari, Chrome, Konqueror и OmniWeb.

Используя ваш пример кода, это будет выглядеть так:

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}

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

Насколько мне известно, разместить его в одном слое невозможно, но можно разместить несколько изображений в отдельных блоках div друг над другом, и это было реализовано популярным веб-сайтом тестирования юзабилити Silverback (проверьте фон на посмотреть, как это было наслоено). Если вы посмотрите исходный код, то увидите, что фон состоит из нескольких изображений, помещенных друг на друга.

Вот статья, демонстрирующая, как сделать эффект, можно найти на Витамин. Похожую концепцию обертывания этих слоев «луковой кожуры» можно найти на Список отдельно.

текст ссылки

Вышеупомянутая ссылка лучше всего описывает то, что вы делаете ...

В настоящее время это можно сделать во всех «современных» браузерах (кроме IE9, afaik). Могу подтвердить, что он работает в Firefox, Opera, Chrome. Нет причин не делать этого, если у вас есть достойное резервное решение для старых браузеров / IE.

Для синтаксиса вы можете выбрать между

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

а также

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

Переносы строк не нужны, но запятая важна.

Внимание! Следующее создаст два фона, даже если вы указали только один URL-адрес изображения:

  background-image:url(..);
  background-position:top, bottom;

И, конечно, есть альтернатива использованию вложенных контейнеров, но это приведет к раздуванию вашего HTML.