Question

我在www.hardcoreleague.info网站上使用了背景图片。有没有办法让背景只在左右边缘和网站内容中，有一个坚实的背景颜色？

这是我身体的css：

background-image: url('../images/baseballfield.jpg');
background-color: #DEDCDD;
font-size: 14px;
font-family: 'Merriweather', serif;
width: 80%;
margin: 0 auto;

Answer 1

使用额外的div来包装所有页面内容并为其提供背景信息。

<强> HTML

<body>
  <div id="wrapper">
    <header>....</header>
    etc
  </div>
</body>

<强> CSS

body {
   background-image: url(whatever-image.jpg);
}
#wrapper {
   width: 960px;
   margin: 0 auto;
   background-color: #ffffff;
}

Answer 2

您可以插入div并设置它们background-color

<body>
    <div id="container">
      <div class="leftbg"></div>
      <div class="centerbg"></div>
      <div class="rightbg"></div>
    </div><!-- #container -->
  </body>

.leftbg {
  background-color: #3366CC;
}
.rightbg {
  background-color: #3377CC;
}

Answer 3

使用div然后在后台添加图像。您可以使用

调整div中的图像大小

    background-size: ;

如果你愿意，可以

标记要调整大小。

这是一个链接，可以更多地参考背景大小更改。 https://www.w3schools.com/cssref/css3_pr_background-size.asp

css背景图像只在边缘

3 个答案: