Место декоративные картины на левой и правой стороне моей страницы

Question

Я хочу обнять мой сайт с изображениями на обеих сторонах, как это (это показывает окно браузера пользователей): (простите навыки вденьте ...)

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

Во всяком случае, до сих пор я tried this (JSFiddle):

HTML:

<div id="everything" class="container"> 
    <div id="left" class="container side-image-left"></div> 
    <div class="container main "> 
    ... header logo etc ... 
    <div class="container content"> 
     ... 
    </div> 
    ... footer etc ... 
    </div> 
    <div id="right" class="container side-image-right"></div> 
</div> 

CSS:

#everything { 
    /* 
    this was my temporary try for the red divs in my image, 
    just a static, nonadjusting background with width 1366px. 

    background-image: url('../images/bg_everything.png'); 
    background-repeat:repeat-y;*/ 
    padding: 0; 
    overflow: hidden; 
    position: relative; 
    max-width: 1366px; 
} 

.side-image-left, .side-image-right { 
    position: absolute; 
    top: 100px; 
    width: 125px; 
    height: 100px; 
} 
.side-image-right { 
    right: 0; 
} 
.main { 
    position: relative; 
    max-width: 1116px; 
    padding: 0; 
    z-index: 100; 
} 

Проблемы с ним:

• дивы на боковая ручка t o содержимое, но как только окно браузера становится слишком маленьким, они попадают в окно браузера вместо

• У меня есть второй «контент» .контейнер в «основном» контейнере, который при изменении размера делает небольшим «прыгает». Основной фон контейнера никогда не должен отображаться, но во время этих «прыжков» есть пустое пространство с обеих сторон. Лучше смотреть на jsfiddle.

Итак, как я могу получить желаемое поведение, как показано на картинке?

Answer 1

я, наконец, решил эту проблему, делая это :

HTML

<div id="bgfix"> 
    <div id="main"> 
     <div id="leftbg"></div> 
     <div id="rightbg"></div> 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
} 

#bgfix { 
    min-width: /* main width (1116px in this case) */; 
    height: 100%; 

    overflow-x: hidden; 

    background-image: /* main background url */; 
    background-position: center; 
    background-repeat: repeat-y; 
} 

#main { 
    width: 1116px; 

    position: relative; 
    margin: 0 auto; 
} 

#leftbg { 
    position: absolute; 
    width: /* image width */; 
    background-image: /* image url */; 

    left: /* -(image width) */; 
} 

#rightbg { 
    /* same as leftbg */ 
    right: /* -(image width) */; /* except use right instead of left */ 
} 

Answer 2

Использование сцентрировано background-image размещено на body.

Для того, чтобы ваши изображения отзывчивый, использование -

background-size: contain; 

Answer 3

использовать новый класс "установить"

<div id="everything" class="container"> 
    <div id="left" class="set container side-image-left"></div> 
    <div class="set container main "> 
    ... header logo etc ... 
    <div class="container content"> 
     ... 
    </div> 
    ... footer etc ... 
    </div> 
    <div id="right" class=" set container side-image-right"></div> 
</div> 

и CSS:

.set{ 
    display:inline-block; 
}