Html 整个背景图像不适合屏幕

（来源：）

嘿，我基本上有两个文件在一个“页眉”和一个“页脚”上面，这两个文件大小都差不多

问题是宽度不适合页面，除了

背景图像：封面

该文件基本上宽1280像素，高约114像素

div #header {
    background-image:url(../img/webclient_header.png);

    height: 114px;
    width: initial;
    margin: 0; /* If you want no margin */
    padding: 0; /*if your want to padding */
}

---

在CSS中，您可以使用属性

background size

调整图像大小以适应：

div #header {
    background-image:url(../img/webclient_header.png);
    background-size:800px 114px; /* Choose your size here W x H */
    height: 114px;
    width: initial;
    margin: 0; /* If you want no margin */
    padding: 0; /*if your want to padding */
}

---

更新：在jsfiddle上签出代码更新如果你想在你的网站上有响应性的图片，

背景图片

并不是最好的选择。您可能需要使用CSS媒体查询来提供不同的背景图像大小，或者使用类似于

背景大小

属性的内容，这与旧浏览器不兼容

我建议你这样做：

<header>
  <img src="you-image.jpg" width="100%" height="auto" />
</header>

---

对于一个页眉/页脚图像来说，这是一个非常复杂的过程。。。我会调查是否有可能把它拆散。。您可以将中心部分设置为整个站点的一个设置宽度，该站点基本上包含菜单。然后，您将剪切1px宽度（x值）px高度，并将其用作标题div后面的重复背景。其他元素可以战略性地添加到站点的其他部分，以更好地反映图像

这不是一个很好的答案，但在这种情况下我会这么做。否则，您会看到图像被拉伸，可能会失去一些焦点

编辑： 在评论中回答您的问题 有点

因此，您将至少有3个图像

header\u middle\u piece.jpg

（图像中间指向“下”）、

footer\u middle\u piece.jpg

（页眉的旋转版本）和

repeating\u pattern.jpg

从那里你将有你的水平布局

<div id="header">
    <div id="container">
       <div id="content"></div>
    </div>
</div>

---

这些是你需要的唯一的风格，让它在整个工作。在wards之后，如果仍然这样做，则需要针对这些条纹的重复背景设置背景，并对其他形状进行div。如果你没有制作这张图片，你将很难将其分解。但这是可行的。

但用“像素宽度”来调整尺寸的问题是，屏幕和分辨率更大的人无法获得整个图像。对吗？因为我想让它“按宽度”穿过页面，所以这是一个响应主题？您是否有指向您正在处理的页面的链接？@JCBiggar请更新您的帖子以匹配JSFIDLE代码。

#header{
   width: 100%;
   background: url('repeating_pattern.jpg') repeat 0 0 scroll transparent;
   height: 20px; // Make this the height of the pattern you are using.
}
#container{
   background: url('header_middle_piece.jpg') no-repeat 0 0 scroll transparent;
   height: 40px; // height of the middle piece.
   width: 200px; // width of middle piece
   margin: 0 auto; // center the container.
}