Html 仅边缘上的css背景图像_Html_Css_Background Image

Html 仅边缘上的css背景图像

html css

Html 仅边缘上的css背景图像,html,css,background-image,Html,Css,Background Image,我正在我的网站上使用背景图像。有没有一种方法可以让背景只出现在网站的左右边缘，并且在网站的内容中有一个纯色背景以下是我的主体css： background-image: url('../images/baseballfield.jpg'); background-color: #DEDCDD; font-size: 14px; font-family: 'Merriweather', serif; width: 80%; margin: 0 auto; 使用额外的div包装所有页面内容并为其

我正在我的网站上使用背景图像。有没有一种方法可以让背景只出现在网站的左右边缘，并且在网站的内容中有一个纯色背景

以下是我的主体css：

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

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

HTML

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

您可以插入到div并将其设置为

背景色

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

使用div，然后将图像添加到背景中。可以使用以下命令调整div中图像的大小：

    background-size: ;

标记以调整大小（如果需要）

这里有一个链接，可以更多地参考背景大小的变化。

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

    background-size: ;