Make background image expand with content?
# February 25, 2013 at 3:33 pm
I have a simple question, or what I think should be simple. I have a background image that I created that is basically a rectangle with a 2px solid border. It is 984px wide by 900px high.
I have a div and I’ve set the background up to point to this image. When I add content though I want the height of the background image to expand and grow with my content. So if there is more content the height of the background image should expand to say 940px or whatever depending on how much content.
Please see the link to the image I created so you can see my background image and how the content spills over.
[Link to image here…](http://picpaste.com/example-XqMXu6b4.gif “”)
How can I do this using CSS so my content doesn’t spill out the div.# February 25, 2013 at 3:44 pm
A background image such as you have described (a fixed size) is not really an ideal practice as you have discovered.
Without seeing the actual image in question it’s difficult to help further but there are multiple techniques for resolving this issue.
A simple solid border is something you can do with CSS so there really is no reason to have that as part of the image.# February 25, 2013 at 4:28 pm
Well as I said, there are a few ways to do this with varying degrees of browser support.
Firstly, try setting:
This will scale the image to the largest size such that both its width and its height can fit inside the content area.
The next option is to chop the image into 3 parts (top, middle & bottom) and then have multiple background images positioned accordingly. Only the middle one need repeat vertically.
The final option is to use the border-image property.
This one is a little harder to get your head around but could be the ideal solution…but support is pretty limited to non-IE…but you could just use a simple border as a fallback.
You must be logged in to reply to this topic.