background repeat-x and position y to 200px, is this possible in css?

Hi all,

Need to use background repeat-y and at the same time need to start the repeating vertically 200px away. is this possible in css?

i tried,

background: url(image.png) 0px 200px repeat-y;

But it does not work.

Any hack please?

 

Do you mean you need the repeating to start 200px away from the edge of your browser or each image in the background to repeat with a 200px gap between them?

Thanks

 

Actually the background is set in a DIV element. So according to DIV, it should be repeated after 200px down.

Thanks for replying.

 

Strange, I've never come across that before. Depending on the design you might just put the repeating background into a div and just add a 200px margin above the div, but that might disrupt your design.

 

You are right mate. It is a strange point. I agree.

Actually the thing is,

The body has a grass background. Then i have to put a round corder DIV area.

But the problem is the the round corner div starts 50% transparent where one can see slight grass , but it will blend until 200px below only. so after that i need to set background to white.

So to repeat with height, i have to use repeat-y of repeating middle background.

This is where i get the problem.

I am sorry if i am not giving your correct explanation. I am unable to show you the layout now.

May be i shall do sample one and upload somewhere,

Thanks mate, some one is here in DP to atleast reply on the problems.

 

My solution? Align that grass texture off top center - then don't use transparency and precomposite the image instead. then you don't have to worry about it since you'd be overwriting the repeating background.

Unless of course it's also dynamic width, in which case you might just be buggered for pulling off yet another goofy art *** effect likely put together by an 'artist' who doesn't know what's practical to do in HTML/CSS while retaining accessibility.

There seems to be a lot of that **** going around right now.

-- edit --

another approach might be to TRIPLE layer. Make a second div that has the grass texture inside the repeat-y, then put the top gradient over that... Though that sounds like alpha transparency which again, I would never use in the first place on a website due to the ridiculous file sizes, need for some bloated javascript to make it work in IE, and that 99% of the time it's not necessary.