Using background-repeat and background-position together

December 07, 2010

Problem: having a background of container that has to be repeated vertically (background-repeat:y-repeat;) start not from the top, and along with that to have a background in inner container that will start from the top of main container

Solution: Add margin to main container, and then add margin to inner container with the negative value of main containers margin. Here is a CSS for that:

topContainer
{
   background-image:url(img/mainBG.png);
   background-repeat:y-repeat;
   margin-top:29px;
}
innerContainer
{
   background-image:url(img/mainBGtop.png);
   background-repeat:no-repeat;
   background-position:top;
   margin-top:-29px;
}