Make background image expand with content?

[West415]

Hi,

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.

[Paulie_D]

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.

[West415]

Thanks for the reply.

Yes, I’m aware one can make a simple solid border with CSS. The link in my post shows the image I’m using (at a smaller scale). If this can be done just using CSS, I’m fine with it, just wasn’t sure.

[Paulie_D]

So the background image is the orange lines?

[West415]

Yes. It’s a box basically, but the lines extend a bit beyond creating this sort of design, I know it’s nothing fancy :)

[Paulie_D]

Well as I said, there are a few ways to do this with varying degrees of browser support.

Firstly, try setting:

background-size:contain

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.

[Paulie_D]

Here’s a quick Codepen. http://codepen.io/Paulie-D/pen/hfluv

The image itself is much smaller than the div but has been scaled up. Try changing the divs dimensions and see what happens.

[Paulie_D]

That’s a nice solution.

[West415]

Thanks for the replies… checking this stuff out now so far looks very promising so thank you guys!

I’ve never used codepen.io, guess I’m a bit behind. I remember seeing users use jsfiddle so I’m guessing codepen.io is something like that?

[West415]

Both of the solutions worked so I definitely appreciate it. I tried it in a couple of browsers and it worked. +1 to you guys!

[Author]

Posts