html - 在我的网页左右两侧放置装饰图片

Question

我想在我的网站上包含这样的图像（这显示了用户浏览器窗口）：（ 请原谅 gimp 技能......）

我希望主要内容变得更小，窗口更小。

无论如何，到目前为止我已经尝试过这个（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 会粘在内容上，但是一旦浏览器窗口变得太小，它们就会转到浏览器窗口

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

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

Answer 1

I finally solved this by doing this:

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

使用一个新的类“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;
}