Проблема CSS с background-attachment: исправлена;

Question

У меня есть сайт Joomla, на котором я создал собственную тему. Сайт http://esn.teipir.gr/.

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

Я использую следующие правила CSS

div.backgroundboxleft {
    background-attachment: fixed;
    background-image: url("/images/back_1.png");
    float: left;
    height: 822px;
    top: 40px;
    width: 457px;
}

и

div.backgroundboxright {
    background-attachment: fixed;
    background-image: url("/images/back_2.png");
    float: right;
    height: 822px;
    top: 40px;
    width: 457px;
}

Если я удаляю фоновое вложение, все в порядке с изображениями, но когда я добавляю с помощью firebug следующий код, все портится. Можете ли вы помочь мне сделать так, чтобы страницы оставались фиксированными, если цвет фона не был сверху изображения?

Спасибо

Answer 1

Когда вы устанавливаете background-attachment:fixed, он фиксирует фон относительно окна. Поэтому вам необходимо настроить background-position ваших изображений, чтобы они отображались в нужном месте. Если вы замените свои свойства background на css ниже, они будут правильно выровнены.

div.backgroundboxleft {
    background-image: url("/images/back_1.png");
    background-attachment: fixed;
    background-position: 0 44px;
    background-repeat: no-repeat;
}

div.backgroundboxright {
    background-image: url("/images/back_2.png");
    background-attachment: fixed;
    background-position: 1323px 44px;
    background-repeat: no-repeat;
}

Живой пример: http://jsfiddle.net/tw16/6fZ96/embedded/result/

Чтобы уточнить background-attachment:fixed останавливает прокрутку фона с окном. Поэтому, если ваш видовой экран слишком мал, и вам нужно прокручивать по горизонтали или вертикали, фон не будет двигаться (то есть будет перекрываться). Более подробную информацию можно найти здесь .