PDA

Click to See Complete Forum and Search --> : Compressing a background image to fit within a #div

IanMartins
12-13-2008, 06:07 PM
I have a #div which has a width of 800px and a height of 25px, and an image which has a width of 500px and a height of 50px.

The image is set as the background of the #div using "background-image: url("images/bg_list.gif");".

How do I make the height of the image (50px) compress into the height of the #div (25px)? I want the entire image to be visible within the #div.

I could of course compress the height of the image using Photoshop, though I'd prefer for it to be dynamic, so that it adjusts itself if I change the height of the #div.

Thank you for your time.
WebJoel
12-13-2008, 10:40 PM
I don't think that you can. -a background image exerts no 'pressure' upon the container, so any 'overflow' will be clipped by default. That is the advantage of background image, being 'out of document' so that container can 'contain' things that do exert pressure against container...

Possibly though, a javascript solution might render a image of known size into a container of known(smaller) size by compressing to fit, with percentages and still be 'background'...
coothead
12-14-2008, 06:58 AM
Hi there IanMartins,

This is in the CSS3 draft...
http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size
...and has already been implemented by Opera, Safari and Konqueror.

Have a look at this test example...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
#background {
width:384px;
height:256px;
border:3px double #f00;
margin:10px auto;
background-image:url(http://www.coothead.co.uk/images/blood.jpg);
-o-background-size:100% 100%; /* Opera */
-webkit-background-size:100% 100%; /* Safari */
-khtml-background-size:100% 100%; /* Konqueror */
-moz-background-size:100% 100%; /*not working in Firefox as yet */
background-repeat:no-repeat;
}

#container img {
display:block;
margin:auto;
border:3px double #f00;
}
</style>

</head>
<body>

<div id="background"></div>

<div id="container"><img src="http://www.coothead.co.uk/images/blood.jpg" alt=""></div>

</body>
</html>

coothead
coothead
12-14-2008, 07:18 AM
Hi there IanMartins,

here is a work-around for those browsers that have not as yet implemented background-size...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
#box {
position:relative;
width:384px;
height:256px;
border:3px double #f00;
margin:10px auto;
}
#box img {
position:absolute;
width:100%;
height:100%;
}
#box div {
position:absolute;
width:100%;
height:100%;
color:#fff;
line-height:256px;
text-align:center;
}
#container img {
display:block;
margin:auto;
border:3px double #f00;
}
</style>

</head>
<body>

<div id="box">

<img src="http://www.coothead.co.uk/images/blood.jpg" alt="">

<div>this is some content</div>

</div>

<div id="container"><img src="http://www.coothead.co.uk/images/blood.jpg" alt=""></div>

</body>
</html>

coothead
deyesborn
04-23-2011, 08:09 PM
Please how can I make my backgroud image fit 100% to div of any size without repeating?

I have a div that is 100% which fit to any screen resolution and I want the background image to also fit to the div without repeat.
coothead
04-24-2011, 05:36 AM
Hi there deyesborn,

and a warm welcome to these forums. ;)

This should work in modern browsers...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>stretched background image</title>

<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#mydiv{
height:100%;
background-image:url(http://www.coothead.co.uk/images/blood.jpg);
background-size:100% 100%;
-webkit-background-size:100% 100%; /* Safari */
-khtml-background-size:100% 100%; /* Konqueror */
-moz-background-size:100% 100%; /* Firefox */
}

</style>

</head>
<body>

<div id="mydiv"></div>

</body>
</html>

coothead
deyesborn
04-24-2011, 01:07 PM
Thanks so much. It work