Treehouse: Grow your CSS skills. Land your dream job.

Tricky Expanding BG Image Question

  • # August 10, 2010 at 2:17 am

    Hey there thanks for reading this,
    This is a little tricky and not sure if it is even possible.

    OK I have BG image of a very rough looking piece of wood as a BG behind my main expanding content frame but……it cant be stretched or repeated cause its a photo of a piece of wood.

    So what I did was sliced the photo of the wood into 3 graphic:

    Top (faded the bottom so it would look smooth when overlayed)
    Middle (could be repeated if needed)
    Bottom (faded the top so it would look smooth when overlayed)

    Ok I have the top slice in place as a BG behind the top part of the main content frame (works good)
    I have the bottom slice in place behind the bottom of the main content frame (works good)

    So now here is my issue, when the content frame expands there is a gap where I need the middle slice to repeat so it will fill from the bottom of the top slice to the top of the bottoms slice and repeat as necessary depending on how much gap there is. Im not sure how to do this.

    Here is the link to the photo of the gap:

    I hope this made sense, and thank you for any input.

    # August 10, 2010 at 2:43 am

    Well Mr.kered45 am very new to this Forms.

    Lets come to the point, I had got your query am leaving here you an link which its designed by me

    here in the above website I had designed the BG image as per the same thing what your requiring.
    I used three images for BG.
    One for top with a fixed height with no repeat.
    Second is for content purpose which gone repeat and expands with respect the content filling.
    And Third for bottom purpose same as top image.

    Well kered45, let me have your actual BG image I can produce it as you wan.

    # August 10, 2010 at 3:15 am

    Ahhh, Thank you so much for you help.
    Here is the link to the files.

    Thank you so much again.

    # August 10, 2010 at 7:10 pm

    Here are some articles on stretching a background image … und-image/ … und-image/ … xible.html

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.