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.
LVL 1
hermesalphaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.