Full Screen Background Image - Pure CSS Code

on Monday, 17 January 2011.

This is a simple tutorial that teaches you how to create a full screen background image for any sized screen or browser window using pure css code.

This method is cross-browser compatible and doesn't require any javascript or flash.

View the Demo

thumb-fullscreen-bg

CSS

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;
}

#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}

HTML

<body>
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" />
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>

Resources

blog comments powered by Disqus