View Full Version : Resolved div-background to stretch vertically

Oct 24th, 2010, 10:30 AM
Hey guys,

I've got a <div> (which is in the middle of my site), and I've designed a nifty background-image for it in photoshop. In effect, it's the standard box-with-rounded-edges-and-drop-shadow, but it looks good.

I've tried different approaches to get this background image to work. I want it to stretch the the full length of the div - no repeats of course.

I've found that with:

background-image:url('../path/to/file/image.png') no-repeat;

... I can stretch it horizontally, so that no matter the original size of the image, it now fits the width of the div... but not the height for some reason. This means that if in photoshop I create the image with a height of 200px, then this is the height it always has, and the text in the div overflows it.

If I create the image with a height of 800px, then it is to tall for the div (or the text therein) and it doesn't show the nifty, smooth round edges in the bottom of the div.

Anybody got any ideas of what to do?

Thanks in advance,


Oct 24th, 2010, 03:06 PM
Please give us to your site URL so we can check and look you image and size
And give you better solution.

Oct 24th, 2010, 03:25 PM
Yes, of course.

There's no direct access to the site, so you'll have to go to here (http://www.hornskovvindberg.dk/moxoma) and put something in the left search field. That will lead you to /search.php. The div in question is the white one in the middle.

Major Payne
Oct 25th, 2010, 04:46 PM
Although not fully support in all browsers, you could try CSS 3 to resize background image as you need it.


Oct 25th, 2010, 05:44 PM
Thanks Major Payne, you led me to a solution.

It seemt that
background-size:100%; only relates to width. To get it to relate to height as well, the simple fix is:

background-size:100% 100%;

A simple solution as always.

Thanks again.


Major Payne
Oct 25th, 2010, 06:55 PM
You're welcome. Always more than one way to "skin a cat"!