Sometimes we need to use an
image as a Background in Our HTML page. Since i am facing the situation too
where I want to do the same while building my Site and so got some ideas from
different sources and hence adding it here for future reference. Here is the
Code to add the background image to the page of your Website :
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <meta http-equiv="content-type"
content="text/html;
charset=windows-1250"> <meta
name="generator"
content="PSPad
editor,www.pspad.com"><style
type="text/css">
<!-- The <style> tag is used to
define style information for an HTML document.
Inside the <style> element you specify
how HTML elements should render in a browser. The required type attribute
defines the content of the <style>
element. -->
html, body {height:100%;
margin:0; padding:0;}
<!-- Margin : An element has four
sides: right, left, top and bottom.
The margin is the distance from each
side to the neighbouring element (or the borders of the document).
<!-- Padding: Padding can also be
understood as "filling".It only defines the inner distance between
the border and the content of the element. -->
#page-background {position:fixed; top:0; left:0; width:100%;
height:100%;}
<!-- We set its position to 'fixed'. This
means that the image will stay fixed, even as you scroll down the page. We
position it using the top and left properties. We also set its height and width
to take up the full screen: -->
#content
{position:relative; z-index:1; padding:10px;} </style> </head>
<body> <div
id="page-background"><img src="image.jpg"
width="100%" height="100%"
alt="Smile"></div>
<div id="content">
<h2>Stretch!</h2>
<p>Done</p>
</div></body></html>
What Happened was the HTML and the Image worked
fine on Firefoz and Chrome but on IE8 no image was displayed. There's
something wrong with the jpeg/jpg files. IE8 is not able to render them.
If you try to load in IE8 you will get a broken picture icon only(It gave
problem for me , may be work fine for You). I downloaded the file and opened it
from the hard drive too, got the same result. So to make it work :
Try loading the pictures in an editor, like GIMP or
PhotoFiltre or mspaint and re-saving them (using save as) without changing any
thing or try tweaking with the Settings of quality of Image and
IE8 is able to open it now!
Hope it helps to people facing similar Issue..
No comments:
Post a Comment