...

View Full Version : Resolved div-background to stretch vertically



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


.content_div{
background-image:url('../path/to/file/image.png') no-repeat;
background-size:100%;
}

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


background-size:100% 100%;

A simple solution as always.

Thanks again.


//deafdigit

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum