Repeat-y vs. Image with height > 1px: How do we show the FULL last graphic iteration?

Last post 11-18-2008 9:16 PM by x-format. 2 replies.

Sort Posts:

  • Repeat-y vs. Image with height > 1px: How do we show the FULL last graphic iteration?

    11-18-2008, 4:12 PM
    • Member
      22 point Member
    • cool2000
    • Member since 12-25-2006, 1:55 AM
    • Posts 108

    here's my basic markup:

    <div class="RuggedBox">
          Variable length content goes here...
    </div>

    The CSS
     
    .RuggedBox
    {
        background-image: url('LeftRuggedEdgeHeightGreaterThan1px.jpg');
        background-repeat: repeat-y;
    }
     
    I know the above does nothing much. I know that the box will stretch vertically as needed, however, it will stop "whenever", which will result in the last iteration of the graphic to cut off (clip). I want the div to stretch long enough so that the last iteration of the graphic will be fully shown. (In case you're wondering, if the last repetion clips, then the rugged line will not meet the corner of the div box, which I want to happen.)
     
    I don't want JavaScript hacks. I don't want a fixed height. So, what CSS and/or markup do I need for this?
      

     

  • Re: Repeat-y vs. Image with height > 1px: How do we show the FULL last graphic iteration?

    11-18-2008, 9:02 PM
    Answer
    • All-Star
      20,638 point All-Star
    • A1ien51
    • Member since 05-06-2005, 6:46 PM
    • MD USA
    • Posts 3,790

    CSS only will not cut it.

    Eric

  • Re: Repeat-y vs. Image with height > 1px: How do we show the FULL last graphic iteration?

    11-18-2008, 9:16 PM
    Answer
    • Participant
      1,663 point Participant
    • x-format
    • Member since 08-26-2008, 5:59 PM
    • Posts 266

     the only thing here that will actually help you, is to set the height of the div, otherwise it won't work.

Page 1 of 1 (3 items)