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. ThanksYou 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=http://www.webdeveloper.com/forum/archive/index.php/"MyBackgroungImage.gif" height="100%" width="100%" />
<div id="content">Your text goes here</div>
</div>
</body>
</html>
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. ThanksYou 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=http://www.webdeveloper.com/forum/archive/index.php/"MyBackgroungImage.gif" height="100%" width="100%" />
<div id="content">Your text goes here</div>
</div>
</body>
</html>