在我的网页的左侧和右侧放置装饰图片

Question

我想用这样的双方拥抱我的网站（这显示用户浏览器窗口）： （原谅gimp技能......）

我希望主窗口缩小，窗口尺寸更小。

无论如何，到目前为止我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;
}

问题：

• 侧面的div坚持内容，但是一旦浏览器窗口变得太小，它们就会转到浏览器窗口

• 我在“main”.container中有第二个“content”.container，当调整大小时，会产生小的“跳跃”。永远不应该显示主容器背景，但在这些“跳跃”期间，两侧都有一些空的空间。最好在jsfiddle上查看。

那么，我如何才能获得如图所示的所需行为？

Answer 1

使用background-image上的居中body。

要使图像响应，请使用 -

background-size: contain;

Answer 2

使用新类“set”

<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;
}

Answer 3

我终于解决了这个问题：

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 */
}