ile ile - 2 months ago 12
CSS Question

css start repeating background from defined position

#container{
background:url(images/bg-main.png) repeat-y;
width: 903px;
background-position: 0px 687px;
background-position: bottom;
height: 1200px;
margin-left: auto;
margin-right: auto;
}
#content{
background:url(images/bg-wood.png) repeat-y;
width: 903px;
height: 678px;
margin-left: auto;
margin-right: auto;
}


#content
div is inside
#container
div. I want
#container
's background to start repeating at 687px from top. Is it possible?

EDIT: Is it possible that first x pixels of div (from top) have emtpy space and after x pixels backgrund starts?

Answer
background : url('image path') 0px 287px repeat-y;

This will repeat vertically your background image from 287px from top.

but another way is to set this to your content div :

margin-top:287px;

you best solution is to do like this :

#container{
    position:relative;
    }


#background{
    background:url('image url');
    position:absolute;
    top:287px;
    left:0px;
    z-index:100;
    }  

#content{
    position:absolute;
    top:0px;
    left:0px;
    z-index:99999;
    }
Comments