Results 1 to 4 of 4

Thread: Repeating Content BG Image

  1. #1
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Repeating Content BG Image

    I have an image *(see attachment) that I want to repeat on the Y axis according to the amount of text that is in it.

    How can I do that with this image?

    Thanks in advance!

    LMW1

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Set the image as the background on repeat (limit to only repeat in the y direction if you want, but that won't matter).
    Now, simply resize the div based on the amount of text. Y means "up and down", right? So just use a normal div with that as the background and that should be everything you need to do.
    For something more complex like X repeating that would mean a little more CSS, but it's certainly possible.

    If you want, remember also to set a width for the div so that it doesn't get too wide and repeat the image on the X axis.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. The Following User Says Thank You to djr33 For This Useful Post:

    lmw1 (04-27-2010)

  4. #3
    Join Date
    Apr 2010
    Location
    Buffalo, New York
    Posts
    2
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Hi,

    Just to elaborate on the above statement "djr33" said. You would be looking at something like this;

    CSS File:
    Code:
    div#container {width:auto;background:url(the/path/to/your/image) repeat-x;overflow:hidden;}
    XHTML File:
    Code:
    <div id="container"></div>
    Now within the same line of CSS for the div#container, you can use top or bottom, depending if you will be assigning height to that div. In case there is more text in the div then background and it expands down ward, you would use either top which would make the background repeat-x but at the very top of the div or use bottom for the same result but on the very bottom of the div.

    Hope that helps.

  5. The Following User Says Thank You to XHTMLiT For This Useful Post:

    lmw1 (04-27-2010)

  6. #4
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Awesome! I'll give it a whirl and see what I whip up.

    Thanks for taking your time to answer my question. I really do appreciate it.

    Respectfully,
    Len

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
  •