整个背景图像不适合屏幕

Question

（来源：http://imgur.com/5pKaiea）

嘿我基本上得到了一个＆＃34;标题＆＃34;之上的两个文件。和一个＆＃34;页脚＆＃34;两个相同的大小有点翻转。

问题是宽度不适合页面，除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 */
}

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

上查看代码更新

Answer 2

如果您希望在自己的网站上拥有自适应图片，那么background-image并不是最佳选择。您需要使用可能的CSS媒体查询来提供不同的背景图片大小，或者使用与旧版浏览器不兼容的background-size属性。

我建议做这样的事情：

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

Answer 3

对于一个页眉/页脚图像进行了很多...我会调查可能会将其分解。您可以将中心部分设置为整个站点的设置宽度，该页面基本上包含菜单。然后，你将切割1px宽度（x值）px高度，并将其用作标题div后面的重复背景。其他元素可以策略性地计划添加到网站的其他部分，以更好地反映图像。

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

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

所以你至少有3张图片header_middle_piece.jpg（图像中间指向＆＃34;向下＆＃34;），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。如果你没有制作这个图像，你将很难分解它。但它是可行的。