Repeat background after position?

HTML & CSS
1

hi,

Consider the following:

background: url('images/vertical_sep.jpg') 300px 52px no-repeat;

This places image from 300px in x and 52px in y, but when I do the folowing I want it to repeat from 52px and not cover over that part.

background: url('images/vertical_sep.jpg') 300px 52px repeat-y;

Here it should repeat from 52px from the element and downwards, is it possible?

2

if i remember correctly you cant repeat like that, it would repeat in both directions.

but you can sure add a margin to solve that problem.

3

if i remember correctly you cant repeat like that, it would repeat in both directions.

I thought so too - I was hoping for a workaround.

Using margin is not an option. This is what I’m trying to achieve.

example.

<div class="multi-content"><div class="fadeup">
     <div class="left_column">
          <h1>This is a heading</h1>
     </div>
</div><div>

multi-content has vertical separator repeated, have to start from set y position because I want a faded image above it. fade up will have the fade up image which will be in the 52px area I mentioned. The reason why I cant use margin is because I want to place text + content beside it. See images attached.

4

Why don’t you just repeat the vertical separator as normal and then on the inner div add the faded top section as a background image to rub out the start of the image underneath? That should get the effect you want quite easily - if i’m understanding correctly and assuming they aren’t transparent images.

When you repeat an image the starting position is the xxpx point at which the image is initially placed and then it is repeated in both directions along that axis. It doesn’t just starts 50px down the page and continue downwards;it starts at 50px down the page and then repeats up and down. (CSS3 should address some of these issues in the future).

5

Ah the problem is the faded part is png alpha transparent I want it to blend with any gradients or such of the div that contains the multi-content div.

6

Yes that’s a problem then :slight_smile:

You’ll could try to drag the inner section upwards with a negative margin so that it starts above the parents repeating image. It could be awkward but it seems you don’'t have much choice.

Or instead create a very long dotted graphic so that you don’t actually need to repeat it and start it 50px down the page etc.

7

guess there is no other choice, thanks. :slight_smile: