Адаптивный фон - Joomla 2.5: Шаблоны, разметка и макеты вывода

И получим фоновое изображение с кривым соотношением сторон на некоторых разрешениях?

#all-bg {position:absolute; top:0; left:0; width:100%; z-index:1;}

Ты бы вместо подколов поправил, а то что-то последнее время на троля стал похож.

Разметка:

Код: html4strict

<body>
  <div id="all-all">
    <!--тут весь ваш сайт-->
  </div>
  <img src="bg.png" width="100%" height="100%" id="all-bg" />
</body>

Стили:

Код: css

html, body {width:100%; height:100%; min-height:100%;}
#all-all {position:relative; z-index:2;}
#all-bg {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}

Код: css

#all-bg {position:absolute; top:0; left:0; width:100%; z-index:1;}

Высота лишняя была, высота подгоняется на самом изображении.

Вы внимательно прочитали?

То есть решение ваших проблем с @media вам не нравиться? Вы хоть почитали, что он делает?

Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др.

Сам шаблон будет фиксированный, а вот фон сверху хочу что бы расширялся и сжимался.

То есть решение ваших проблем с @media вам не нравиться? Вы хоть почитали, что он делает?

У Вас
<img height="100%" width="100%" id="all-bg" src="/templates/atomic/images/bg1.jpg">
Просто уберите высоту и отсюда.

очень интересный способ и его я тоже попробую.

смущает только поддержка ИЕ только с 9.0+

Для общего понимания:

Код: css

/* Разрешения */
/* Начало 1280 на 1024 */
@media screen and (min-width: 1200px){
	.class{.....}
}

/* Начало 1024 на 768 */
@media screen and (min-width: 1000px) and (max-width: 1200px){
	.class{.....}
}

/* Начало 800 на 600 */
@media screen and (min-width: 10px) and (max-width: 900px){
	.class{.....}
}

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

И сколько "диапазонов" придется задать руками, чтобы попасть по ширине пиксель в пиксель? Если не попадать пиксель в пиксель, то какой смысл вообще этим заниматься (все равно картинка будет увеличиваться/уменьшаться, так же, как и с шириной 100%), при этом теряя кроссбраузерность?

Правильно понимаю, что требуется что-то вроде этого http://bavotasan.com/demos/fullbg/ (тянуть окно браузера)?

Чистым хтмл+цсс не получится сделать ничего, кроме просто фиксированного фона, но оно же нам не подходит.
Потому только JS

фон сверху хочу что бы расширялся и сжимался

NortonFox, ты не прав, прекращай, с @media будет больше проблем, чем пользы, начиная от кучи фонов, заканчивая избыточностью кода, в данном случае этого не требуется.