October 28, 2011

Creating a full screen background in CSS

Add the following CSS to your page:

<style>
html, body { height: 100%; width: 100%; padding: 0; margin: 0;}
#full-screen-background-image { z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}
</style>

Add the following HTML code to the body of the page:

<img id=”full-screen-background-image” src=”1.jpg” alt=”full screen background image” />

 

Some other examples here: http://css-tricks.com/3458-perfect-full-page-background-image/

Or use the SuperSized jQuery plugin http://buildinternet.com/project/supersized/ 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>