在特定位置重复CSS背景

Question

I'm trying to get a background tile for a certain position, like so:

I have the following CSS and dummy div under the body tag.

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

However this doesn't reach the bottom despite specifying bottom 0. Any ideas? I think I may be going about this the wrong way.

Answer 1

You might want to make sure you are including a reset.css http://meyerweb.com/eric/tools/css/reset/

You can then try setting the background property of the body itself, setting the position like so:

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

The "blue" at the start specifies the colour of the top part of the image. The two properties at the end specify the background "position". Specifying bottom should make it glue to the bottom.

Then the height of the background image itself will determine how far up the tile it comes. You can use repeat-x instead of no-repeat if you want the background to tile horizontally..

One of many ways no doubt.

Answer 2

it should work-

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;
}

the css style for html, body part is must.