I wonder if there is a way where we can repeat the background image and position it at the same time. something like this: background: url("smiley.gif") repeat-y left 25px;

The following css renders the smiley.gif and places on the left after 200px at top.

#bg { 
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: left 200px;

But when I change the background-position property to repeat-y, the 200px from top doesn't work and it renders from the top. I googled for this but couldn't find anything.

Is there any hack to accomplish this?

3 answers

Mottie 1134

The CSS assumes you want to start the repeat-y from the top. The only way I can think of to do this would be to put your background image in a relatively positioned div.


<div id="bg"></div>


#bg {
 background: url(http://i44.tinypic.com/4v0duw.jpg) repeat-y;
 height: 290px;
 position: relative;
 top: 200px;
 left: 0;

If you need the images to go all the way down the page, then you may have to position a div over the body background to cover up the top 200px.

Answered almost 9 years ago by Mottie

Include 200px of empty space in the image.

Answered almost 9 years ago by Nathan Duran
  • Since I want that bg image to repeat-y, if I put the empty space of certain height, when it repeats, that empty space will also gets repeated which I don't want. Millisami almost 9 years ago
  • Then no, you can't do it. Nathan Duran almost 9 years ago

The repeat-y takes overall control am afraid,

The effect of your code is the repeat-y creates a continuous loop along the y axis of you page.

By defining the background position as 200px, this has shifted the start of the loop down 200px, but as your image is the same just repeating this gap is filled with the repeat of your background, so no joy for you.

What I may suggest is something along the lines of a sliding door effect, create an image starting with 200px of white space as suggested by Nathan. Then repeat your image for 1000px save this image.

change the position from 200px to top

Although the background image is now bigger you will get your desired effect.

Answered almost 9 years ago by Luke Duddridge