在特定位置重复CSS背景

Question

我正在尝试为某个位置获取背景图块，如下所示：

我在body标签下面有以下CSS和虚拟div。

div#dummy {
    position: absolute;
    top: 200px;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url("data:image/png;base64....");      
}

然而，尽管指定了底部0，但这并没有达到底部。任何想法？我想我可能会以错误的方式解决这个问题。

Answer 1

您可能需要确保包含reset.css http://meyerweb.com/eric/tools/css/reset/

然后您可以尝试设置正文的background属性，设置位置如下：

background: blue url('myimage.png') no-repeat left bottom;

＆＃34;蓝色＆＃34;在开始时指定图像顶部的颜色。最后的两个属性指定背景＆＃34; position＆＃34;。指定底部应使其粘在底部。

然后，背景图像本身的高度将决定它到达瓷砖的距离。如果您希望背景水平平铺，则可以使用repeat-x代替no-repeat。

毫无疑问，有很多方法之一。

Answer 2

它应该有用 -

html, body
{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
} 
#bluePart
{
    height:30%;
    width:100%;
    background:#2A3BA6;
    border:solid 0px #000000;
}
#lowerTilePart
{
    height:70%;
    width:100%;
    background-image:url(images/bgImage.gif);
    background-repeat:repeat;
    border:solid 0px #FF0000;
}

html，body 部分的css样式必须。