SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Repeat background after position?

    hi,

    Consider the following:

    Code CSS:
    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.

    Code CSS:
    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. #2
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    <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.
    Attached Images Attached Images

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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).
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes that's a problem then

    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. #7
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes that's a problem then

    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.
    guess there is no other choice, thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •