css start repeating background from defined position

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

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 2

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>