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?

score 7 · Answer 1 · answered Apr 09 '11 at 11:37

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

score 5 · Answer 2 · answered Sep 21 '16 at 00:10

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>

Farzin Zaker · Accepted Answer · 2011-04-09T11:38:40.257

1

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

edited Apr 09 '11 at 11:38

answered Apr 09 '11 at 11:20

Farzin Zaker

3,578
3
25
35

2

your first suggestion does note work. 287px 0px - first value here is horizontal position, not vertical. But, this second solution seems ok and I will have to define it's height using jquery – ilija veselica Apr 09 '11 at 11:32
1

`background : url('image path') 0px 287px repeat-y;` this is something I already tried (you can check my question (line 2 and line 4) - but it doesn't work :) – ilija veselica Apr 11 '11 at 11:40
Use the last solution. I wrote a sample for you. – Farzin Zaker Apr 11 '11 at 12:52
3

The first solution is incorrect, and shouldn't remain a part of the answer. – johncip Mar 16 '16 at 00:56
First section needs to be removed. – Adrian May 10 '16 at 18:33

css start repeating background from defined position

3 Answers3

Linked