Html 可扩展背景图像

我有一个iPad作为背景图片

但是我希望它可以扩展，希望是页眉、页脚的一部分，然后中间部分可以扩展到页面的长度

正在寻找任何建议以获得这种效果，但不确定现在使用哪种技术

---

亲切问候，

当您不想对图像进行切片时，请使用

边框图像。以下是一个例子：


因为我很懒，所以代码是由
生成的，您可以定位背景然后堆叠元素，在下面的示例中，您可以继续在1000px块中添加任意数量的
div
元素。也就是说，你最好为中间部分创建一个新的图像，然后垂直重复，这意味着它可以是任何高度

或者-为什么不使“屏幕”部分可滚动

HTML

谢谢，这是一个很棒的解决方案，两个都很棒的解决方案，但在这张图片中使用了边框case@Jamie000012-使用边框图像是一个不错的选择-它更灵活，很高兴听到我没有选择糟糕/懒惰的解决方案！其中一个原因是我也必须扩大它的宽度，边界图像在这里工作得很好。再次感谢！编辑：另外，另一种解决方案也很酷-如果我想到这一点，我可能会从StartHanks开始，选择这个=不知道这个诡计，但它在这种情况下工作得很好，还能够扩展它的宽度，使它更宽，这是我的待办事项列表上的。：-）
.ipad {
    border-style: solid;
    border-width: 143px 55px 144px;
    -moz-border-image: url(http://www.exampe.com/image.jpg) 143 55 144 repeat;
    -webkit-border-image: url(http://www.exampe.com/image.jpg) 143 55 144 repeat;
    -o-border-image: url(http://www.exampe.com/image.jpg) 143 55 144 repeat;
    border-image: url(http://www.exampe.com/image.jpg) 143 55 144 fill repeat;
    /*just for the demo*/
    height: 2000px;
}

<header></header>
<div></div>
<div></div>
<footer></footer>

div, header, footer {
    background-image:url(http://www.propertyitguy.co.uk/img/tablet-bg.png);
    background-repeat:no-repeat;
}
header, footer {
    height:100px;
}
footer {
    background-position:0 -1400px;
}
div {
    background-position:0 -200px;
    height:1000px;
}