Grow your CSS skills. Land your dream job.

Make background image expand with content?

  • # February 25, 2013 at 3:33 pm

    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.

    # 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:09 pm

    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.

    # February 25, 2013 at 4:16 pm

    So the background image is the orange lines?

    # February 25, 2013 at 4:18 pm

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

    # 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:

    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.

    # February 25, 2013 at 4:30 pm

    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.

    # February 25, 2013 at 5:13 pm

    You can do what you want with a pseudo-element: http://codepen.io/CrocoDillon/pen/vhykC :)

    # February 25, 2013 at 5:50 pm

    That’s a nice solution.

    # February 25, 2013 at 9:45 pm

    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?

    # February 25, 2013 at 10:23 pm

    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!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".