关于html背景图片往下拉伸问题

Question

左边小橙色竖条跟着右侧一起向下拉伸css 怎么写啊？？

Answer 1

repeat这个值是重复的意思用于background里面的

标准写法：

background-repeat: repeat-x || repeat-y || none 顾名思义这三个的意思是

    1、repeat-x：意思是说在x轴方向重复出现也就是横坐标重复填充满背景。

    2、repeat-y：这就是在y轴方向重复出现也就是纵坐标重复填充满背景。

    3、none：不重复背景。

    4、默认值不写的时候是同时重复出现在x轴和y轴

缩略写法：

    background:url() position repeat color;

背景属性：

    background-image：背景图片的路径

    background-position：背景图片的定位

    background-repeat：背景重复

    background-color：背景颜色

    background-clip：背景绘制区域

    background-origin：背景定位区域

    background-size：背景图片的尺寸

问题解答

    按上图的意思有两种解决方法

        1、可以用border（边框）来实现这一效果，代码如下：

            html
                <div class="border">
                <h1>Titel_01</h1>
                <span>test01,test02</span>
                </div>

            css
                * { margin:0; padding:0;}
                h1 { font-size:12px; font-weight:normal;}
                .border { border-left:2px solid #ff9a2e; padding-left:8px;}

        2、可以用background（背景）来实现这一效果，代码如下：

            html
                <div class="border">
                <h1>Titel_01</h1>
                <span>test01,test02</span>
                </div>

            css  
                * { margin:0; padding:0;}
                h1 { font-size:12px; font-weight:normal;}
                .border { background:url(../images/shutiao.gif) 0 3px repeat-y;}

Answer 2

给容器做背景，自适应就可以了，写法如下：

*{background:url(images/XXX.png/jpg/gif) left repeat-y;}

这样就可以了

Answer 3

background:url(图片路径) repeat-y;这样就会竖着延伸了