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-attachment:fixed;
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
0
points

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.

HTML

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

CSS

#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 over 6 years ago by Mottie
0
points

Include 200px of empty space in the image.

Answered over 6 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 over 6 years ago
  • Then no, you can't do it. Nathan Duran over 6 years ago
0
points

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 over 6 years ago by Luke Duddridge