Background Image in HTML

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,"><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%"
<div id="content">

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: