响应式网站中的静态背景图像 - 不调整大小答案

【问题标题】：static background image in responsive website - not resizing响应式网站中的静态背景图像 - 不调整大小
【发布时间】：2016-05-24 22:51:35
【问题描述】：

我制作了小型响应式网站。一切看起来都不错，但不是背景。问题是这个背景是一个图像，并在两侧（左右）显示了 2 个女人。其中一部分身体必须始终在侧面可见。但是当我更改分辨率时，背景正在调整为：/ 如何使背景变为静态？背景附件：修复；对我没有帮助

这是我的代码：

body{ 
    background:url(/images/bg.jpg) top; 
    background-repeat:no-repeat; 
    width:100%; 
    margin:0 auto; 
}

谢谢！

【问题讨论】：

添加您的代码，因为没有它我们无法帮助您。否则，这将作为题外话关闭。
这里有我的朋友：travi-design.pl/s.html
这不是代码，这是html页面..给我们发送有问题的代码sn-p..
是的，但您可以看到所有页面并找到解决方案。问题只是背景，我需要让它不调整大小。这里你有 body CSS 代码 body{ background:url(/images/bg.jpg) top;背景重复：不重复；宽度：100%；边距：0 自动； }
如果您需要始终在左右两侧显示某些内容，最好将“两个女人”放入两个单独的 div 中并将它们绝对定位。

标签： html css responsive-design responsive

【解决方案1】：

您的 CSS 存在一些问题：

您没有指定背景的大小
您没有指定背景的显示方式
您没有指定背景的定位方式；
您指定的背景不正确。

这是你应该使用的：

body {
    background-image: url(http://travi-design.pl/klienci/rea_strefamarek/szablon/images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    margin: 0 auto;
}

【讨论】：

【解决方案2】：

我会将该图像拆分为两个单独的图像，并按照我在之前的帖子中描述过的类似情况使用它们（当时中间有一个视频）：https://stackoverflow.com/a/34192574/5641669 和 Fiddle http://jsfiddle.net/fusuhga6/2/

#Container 元素有一个百分比宽度 (100%)，加上一个以 px 为单位的 max-width，它等于中心元素宽度的总和加上两个图像的宽度。它是margin: 0 auto 使其在浏览器窗口或周围容器内水平居中。这两个图像作为该容器的两个背景图像包含在内，一个左对齐，另一个右对齐（顶部）。所有元素都具有相同的高度。视频元素的大小是固定的（小提琴示例中为 250px x 200px）。它还具有margin: 0 auto 使其在#Container 内水平居中。

【讨论】：

【解决方案3】：

*, html{ margin: 0;
  padding: 0;}
body{
  background: #c4c4c4;
  margin: 0;
  padding: 0;
}

.content{
  position: relative;
}

.backgroundBox{
  height: 100%;
  width: 100px;
  position: absolute;
  
}

.leftSide{
  background: #a9a9a9;
  left: 0px;
}

.rightSide{
  background: #bbbbbb;
  right: 0px;
}

<div class="leftSide backgroundBox"></div>
<div class="rightSide backgroundBox"></div>

<div class="content">
<h1>Page Content</h1>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

【讨论】：