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 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,

//deafdigit

phpdeveloper

10-24-2010, 02:06 PM

Please give us to your site URL so we can check and look you image and size
And give you better solution.

deafdigit

10-24-2010, 02: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

10-25-2010, 03:46 PM

Although not fully support in all browsers, you could try CSS 3 to resize background image as you need it.

http://www.css3.info/preview/background-size/

deafdigit

10-25-2010, 04: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: