整个背景图像不适合屏幕答案

【问题标题】：Entire background image is not fitting on screen整个背景图像不适合屏幕
【发布时间】：2014-04-18 22:47:31
【问题描述】：

嘿，我基本上得到了一个“页眉”和一个“页脚”上面的两个文件，两者大小相同，只是翻转了。

问题是宽度不适合页面，除了background-image: cover之外还有什么方法吗？

该文件基本上是 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 */
}

【问题讨论】：

标签： html css background width background-image

【解决方案1】：

在 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 http://jsfiddle.net/bKZ8N/ 上的代码更新

【讨论】：

但是使用“px 宽度”调整大小的问题在于，屏幕和分辨率较大的人无法获得整个图像。正确的？因为我希望它“按宽度”穿过页面
所以这是一个响应式主题？您是否有指向您正在处理的页面的链接？
@JCBiggar 请更新您的帖子以匹配 JSFiddle 代码。

【解决方案2】：

如果您希望在您的网站上添加响应式图片，background-image 并不是最好的选择。您需要使用可能的 CSS 媒体查询来提供不同的背景图像大小，或者使用与旧浏览器不兼容的 background-size 属性。

我建议这样做：

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

【讨论】：

【解决方案3】：

对于一个页眉/页脚图像来说，这是很多事情...我会考虑将其分解。您可以将中心部分设置为整个站点的固定宽度，该站点基本上将包含菜单。然后，您将剪切 1px 宽度（x 值）px 高度并将其用作标题 div 后面的重复背景。其他元素可以战略性地计划添加到网站的其他部分，以更好地反映形象。

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

编辑：在 cmets 中回答您的问题有点……

因此，您将至少拥有 3 张图片header_middle_piece.jpg（指向“向下”的图片中间）、footer_middle_piece.jpg（标题的旋转版本。）和repeating_pattern.jpg

从那里你会有你的水平布局。

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

为您的页脚使用相同类型的布局。

#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.
}

这些是您需要的唯一样式以使其整体发挥作用。病房之后，如果您仍然这样做，您需要将背景定位为这些条纹的重复背景，并为其他形状制作一个 div。如果您没有制作此图像，您将很难将其分解。但这是可行的。

【讨论】：