PDA

Click to See Complete Forum and Search --> : Image Size

grip221
07-24-2004, 12:52 AM
I have a couple of images that I am setting as the background for two different divs on a page. The problem I am having is that the div 'boxes' are wider and taller than the images. How can I set the height and width of the images to fit the size of the divs?

I am using backgroun-image: to set the image but I have not come across anything to resize images. The images just repeat. Using no-repeat will not solve my issue. So what have I missed? Sample code would be greatly appreciated. Thanks
Fang
07-24-2004, 03:42 AM
You can not change the size of the background image.
Do it this way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Image stretch</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#container {position:relative; height:100px; width:200px;}
#BGimage {display:block;}
#content {position:absolute;top:0;left:0;}
-->
</style>

</head>
<body>
<div id="container">
<img id="BGimage" alt="background image" src="MyBackgroungImage.gif" height="100%" width="100%" />
<div id="content">Your text goes here</div>
</div>
</body>
</html>