css start repeating background from defined position
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>
Related videos on Youtube
ilija veselica
Updated on September 21, 2020Comments
-
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 almost 13 yearsyour 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 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 almost 13 yearsUse the last solution. I wrote a sample for you.
-
johncip about 8 yearsThe first solution is incorrect, and shouldn't remain a part of the answer.
-
Adrian almost 8 yearsFirst section needs to be removed.