Question

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

这是我的代码：

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

谢谢！

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

Answer 2

我将这个图像拆分成两个单独的图像并按照我在之前的帖子中描述的那样使用它们来处理类似的情况（那个时候有一个中间的视频）：https://stackoverflow.com/a/34192574/5641669和小提琴{{3 }}

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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: