css start repeating background from defined positi

Question

#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 1

You can achieve this with pseudo element (::before or ::after) and take advantage of calc() for the offset.

Pseudo element will give you more control and won't affect the content and does not require the need for an extra HTML tag.

Here is a basic example with 100px offset from top:

.background {
  height: 300px;
  border:1px solid;
  position: relative;
}

.background::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: calc(100% - 100px);
  width: 100%;
  display: block;
  box-sizing: border-box;
  background: url(//placehold.it/100x100);
}

<div class="background"></div>

You can also use the same techique to offset from left:

.background {
  height: 300px;
  border:1px solid;
  position: relative;
}

.background::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: calc(100% - 100px);
  display: block;
  box-sizing: border-box;
  background: url(//placehold.it/100x100);
}

<div class="background"></div>

Or even from both directions (reversed, too!):

.background {
  height: 300px;
  border:1px solid;
  position: relative;
}

.background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 100px);
  width: calc(100% - 100px);
  display: block;
  box-sizing: border-box;
  background: url(//placehold.it/100x100);
}

<div class="background"></div>

Answer 2

As far as I know it's not possible how you're trying to do it, repeat-x and repeat-y, will repeat the image in both directions along the axis

if you repeat container background full length does the content div background image not cover up the first 678px anyway?

can you provide code in a JSFiddle so we can see what effect you're trying to achieve there will be a way ;)

Answer 3

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