Фиксированный фон в пределах Абсолютного позиционированного div

Question

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

У меня, кажется, проблемы с настройкой фонового положения баннеров, положение фона не похоже на родительский div. Я хотел бы, чтобы фон баннера был в центре div.

код и пример site

<style> 
.page-container { 
    position: relative; 
    background: #FFF; 
    width: 970px; 
    margin-left:auto; 
    margin-right: auto; 
    background-color:#F00; 
} 

#left-bg { 
    width: 306px; 
    height: 100%; 
    position:absolute; 
    top: 0px; 
    left: -306px; 
    background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif); 
    background-position: center center; 
    background-attachment: fixed; 
} 

#right-bg { 
    width: 306px; 
    height: 100%; 
    position:absolute; 
    top: 0px; 
    right: -306px; 
    background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif); 
    background-position: top center; 
    background-attachment: fixed; 
    background-position: center right; 
} 
</style> 

<div class="page-container"> 
    <div id="left-bg"></div> 
    <div id="right-bg"></div> 
</div> 

Answer 1

изменить ваш CSS, как это:

.page-container { 
    position: relative; 
    background: #FFF; 
    width: 970px; 
    margin-left:auto; 
    margin-right: auto; 
    background-color:#F00; 

    } 

#left-bg { 
    width: 306px; 
    height: 100%; 
    position:absolute; 
    top: 0px; 
    left: -306px; 
    background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif) no-repeat 100% 0; 
} 

#right-bg { 
    width: 306px; 
    height: 100%; 
    position:absolute; 
    top: 0px; 
    right: -305px; 
    background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif) no-repeat 100% 0; 
} 

Кроме того, если вы делаете это в соответствии с проектом, вы должны рассмотреть вопрос об изменении right: -305px; (который я также изменился с ваша колонка, потому что она добавляет пустое поле 1px слева от столбца) до right:0