How do I stretch the background-image on my webpage, using HTML?

How do I stretch the background-image on my webpage, using HTML?

Everything is written with HTML 4.01 (I'm a beginner, don't know any JavaScript or CSS yet).
The image muliplies itself about 220 % horisonally and 20 % vertically now, but I want it stretched out 100 % so it covers the whole screen. Can I do this with simple HTML? Or do I have to use CSS? It's a jpg-image.
hermesalphaAsked:
Who is Participating?
 
peanutvendor25Connect With a Mentor Commented:
You have to use CSS to layer the image over the page. The code there will show you how to make it stretch. It came from http://www.quackit.com/html/codes/html_stretch_background_image.cfm so go there if you want an explanation of how everything is done in this code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
	<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
	<div id="content">
	<h2>Stretch that Background Image!</h2>
	<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
	<p>Go on, try it - resize your browser!</p>
	</div>
</body>
</html>

Open in new window

0
 
Lee SavidgeCommented:
0
 
peanutvendor25Commented:
basically the same code. CSS 3 does not work in broswers yet
0
 
LZ1Commented:
While the proposed solutions above will work, please understand that if your image is not properly created or formatted itself, you are going to have heavy pixelating issues.  
I know you said you weren't versed in CSS or Jquery and that's fine. That's what we're here for.  I personally use this one:
http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/ 
It's great and resizes the image to the best of it's ability without pixelating.  It also allows for cross browser compatibility and different resolutions.
 
0
 
hermesalphaAuthor Commented:
Thanks very much, worked perfect at once!
0
All Courses

From novice to tech pro — start learning today.