The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Div content box stretch with images

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #30227

    I have spent the past 3 days researching how to make a content box with variable width/height with CSS and images

    Example image here:
    Example Content Box (Blue lines represent cuts)

    What I want it to do:
    -Use background-image for all corners of content box
    -Use background-image for top, bottom, left, and right (These images need to use background-repeat to “stretch”)
    -Expands to fit content
    -Can expand to any width/height combination

    Can anyone offer some insight on the best way to do this?


    Perhaps what you’re looking for, is the CSS3 property border-image.
    You can read more about it here.


    I’ll address your last two points.

    If you want a CSS Div to expand, you can’t specify a height on the div. Give it a fixated width, but make sure you don’t set the height. This automatically will stretch the div as content pours in.

    Also, you could use a top image and a bottom image, along with a background color and alternatively that would allow it to stretch without disturbing the images. You could use an image per corner, but I do like the top and bottom image with background color technique myself.


    This is in a book I have by Andy Clark. It’s from 2007 though, I don’t know what other options are available now. Using multiple background images in CSS3.

    The Html:

    A flexible box with rounded corners

    The CSS:

    /*assign background images*/
    div.content_introduction { background-image:
    url("middle_left.png"); }

    /*set repeat properties in same order */
    div.content_introduction {background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-x, repeat-y }

    /*position each image*/
    div.content_introduction { background-position:
    top left, top right, bottom right, bottom left, top left, top right, bottom right, bottom left; }

    If you are familiar enough with CSS I would second Bob’s post. If you are not, then go with the background image solution, although the width and height stretchable factor can get a little complicated.

    There are also these methods from Eric Watson

    With expandable boxes like that I tend to only go with expandable height and keep the width fixed. So if you are using bg images the solution is a little easier, top div fixed height and width, middle div fixed width and bg image repeat-y, bottom div same as top div.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.