Div content box stretch with images

[cboileau]

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?

[Bob]

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

[Raven]

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.

[Hayley]

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("top_left.png"),

url("top_right.png"),

url("bottom_right.png"),

url("bottom_left.png"),

url("top_center.png"),

url("middle_right.png"),

url("bottom_center.png"),

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; }

[virtual]

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
http://www.visibilityinherit.com/code/drop-shadow.php
http://www.visibilityinherit.com/code/shadow-fixedwrapper.php

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.

[Author]

Posts