css start repeating background from defined position

25,789

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

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

Solution 3

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>

Share:
25,789

Related videos on Youtube

ilija veselica
Author by

ilija veselica

Updated on September 21, 2020

Comments

  • ilija veselica
    ilija veselica over 3 years
    #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?

  • ilija veselica
    ilija veselica almost 13 years
    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
    ilija veselica almost 13 years
    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 :)
  • Farzin Zaker
    Farzin Zaker almost 13 years
    Use the last solution. I wrote a sample for you.
  • johncip
    johncip about 8 years
    The first solution is incorrect, and shouldn't remain a part of the answer.
  • Adrian
    Adrian almost 8 years
    First section needs to be removed.

Related