css头部图片拉伸

把header里的background-repeat:no-repeat;改成repeat-x这就是横向平铺。
还有可以做背景大小。
在header里加上一句：background-size:100% 100%;分别代表宽，高，这是CSS3，所以旧版本IE不支持。这100%可以是固定像素，也可以是相对的EM，也可以是百份比。

背景是无法拉伸的 只能平铺，或者 上下 左右复制延伸
no-repeat: 即无论背景的大小, 只显示单个背景, 如首页的第一篇文章标题前的”NEW”图标, 代码如上所示;
repeat: 指背景横向和纵向重复连续显示;
repeat-x: 指背景横向重复连续显示;
repeat-y 指背景纵向重复连续显示
两边拉伸的话可以，中间背景做一个渐变，两边使用单色平铺

设置相对宽度为100%就ok了！
例如：

{
background:url(/images/beijingjpg) no-repaet;
width:100%;
}

我打个比方吧
<p><img src="" width="300" height="300"></p>
用width 和height来控制它的大小
当你的像素太小的话，效果出来就太丑了点

可以通过cover和contain来对进行伸缩。

语法：

background-size:auto;/ 默认值，不改变背景的高度和宽度 /

background-size:100px 50px;/ 第一个值为宽，第二个值为高，当设置一个值时，将其作为宽度来等比缩放 /

background-size:10%;/ 0％~100％之间的任何值，将背景宽高按百分比显示，当设置一个值的时候同也将其作为宽度来等比缩放 /

background-size:cover;/ 将背景等比缩放填满整个容器 /

background-size:contain;/ 将背景等比缩放至某一边紧贴容器边缘 /

扩展资料：

CSS背景自适应、全屏、填充、拉伸

方法一：js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">  

<img src="pictures/backgroundjpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground')height($(window)height());

$('#formbackground')width($(window)width());

});

</script>

方法二：全浏览器兼容

bg{

background:url(>

filter:"progid:DXImageTransformMicrosoftAlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

no-repeat: 即无论背景的大小, 只显示单个背景
repeat: 指背景横向和纵向重复连续显示;
repeat-x: 指背景横向重复连续显示;
repeat-y 指背景纵向重复连续显示;例: 查看本站css文件,可以看到以下代码:
body {
font: normal 12px/15 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybgjpg) repeat-y;
}
可以看到背景bodybgjpg是纵向重复显示的, 并随页面的长度的增加而增加

将这个图切成三份

抱歉，你的图我这没法用，自己弄个了，随便做个示意就好

这三个图，中间的那个给背景图然后平铺就可以了，代码我就不给你写了，思路给了就好了吧

---