Full screen Background image (not flash)

JavaScript
21

…

You might want to give it a minus z-index so it goes behind everything else.

IE6 Probably won’t like it. However, for all I care, IE6 can go @#$%.[/QUOTE]

What do u mean by that?

22

Wow this is an old topic.

What do you mean by what do I mean?

23

I was talking about the minus z-index

24

To revisit this topic anyhow, to get a full-screen background image that doesn’t distort, one of the best solutions is via css.

25

Not bad but minimize the window horizontally and it won’t work too good.

@tiago:

I am loathe to quote W3schools but:

The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Note: Elements can have negative stack orders.

26

<head>
<title>Test</title>
<style type=“text/css”>
html,body,#bg,#bg table,#bg td{width:100%;height:100%;overflow:hidden}
img{display:block}

#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
#bg td{vertical-align:middle;text-align:center}
#bg img{min-height:50%;min-width:50%;margin:0 auto}
</style>
</head>
<body>
<div id=“bg”><div>
<table cellpadding=“0” cellspacing=“0”><tr><td><img alt=“” src=“asdsd.jpg” /></td></tr></table>
</div></div>
</body>
</html>

using this code- how would i put stuff(text/image) on top of the background image now? it puts the background image on top of everything so i can’t see anything anymore.

27

give it a z-index of 0 or something

28

I know this thread is old but I ran across it during my extensive research into this problem and thought I would share my results (and solution). There are some easy to use jQuery plug-ins that are what mostly seems to be used to solve this issue. They even handle image distortion by keeping the aspect ratio intact. Here are two examples with the Ajax blender being supported by a commercial enterprise:

http://johnpatrickgiven.com/jquery/background-resize/

http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html

My problem was that I am not using a photograph for my background and to handle both wide-screen and old-screen scenarios these scripts allow a small portion of the image to be cropped at screen edge. Because I am using a geometric design in the background it becomes instantly noticeable if a small portion is missing.

My solution was to go back to the full CSS solution I had learned about through guides by Stu Nicholls , [URL=“http://css-tricks.com/how-to-resizeable-background-image/”]Chris Coyier & [URL=“http://webdesign.about.com/od/css3/f/blfaqbgsize.htm”]Jennifer Kyrnin and mess around with the CSS and HTML until I got an image in the background of my page that only resized with the height of the page, was centred, and fixed so content would scroll over it. This method of course leaves you with bars on the sides but my geometric image has a solid background that can blend with the pages background colour. If this method can be implemented in your design it has the added advantage of being lightweight, both in the code (no java) and the image size (smaller image blending out to background colour). The following code can be copied and pasted into a blank index.html and just needs the image name updated:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<title>Faking a Stretched Background Image - Across the Whole Page</title>
<meta name="keywords" content="background size, background stretch,
stretched background images">
<meta name="description" content="Use the z-index property to layer your
 content on top of your stretched background image.">
<style type="text/css">
body {
    margin:0; padding:0;
}
html, body, #bg {
    height:100%;
    width:100%;
}
#bg {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    overflow:hidden;
    z-index:-99;
}
#bg img {
    min-height:100%;
}
#content {
    width:200px;
    z-index:1;
}
</style>
</head>
<body>
<div align=center>
   <div id="bg">
      <img style="display:block;" src="your_bg_image.gif">
   </div>
</div>
<div id="content">
//your content here!
</div>
</body>

</body></html>

I have tested this successfully in current Firefox, Safari, and IE8. This failed to centre the image in Opera but it still resizes and justifies left. Would love a fix for Oprea if anyone sees it.

29

Found the solution to Opera (and Chrome) and tidied it up for other browsers by using text-align: center;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<title>Faking a Stretched Background Image - Across the Whole Page</title>
<meta name="keywords" content="background size, background stretch,
stretched background images">
<meta name="description" content="Use the z-index property to layer your
 content on top of your stretched background image.">
<style type="text/css">
body {
    margin:0; padding:0;
}
html, body, #bg {
    height:100%;
    width:100%;
}
#bg {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    padding:0;
    overflow:hidden;
    text-align:center;
    z-index:-99;
}
#bg img {
    min-height:100%;
}
#content {
    width:200px;
    z-index:1;
}

</style>
</head>
<body>

<div id="bg">
   <img src="your_bg_image.gif">
</div>

<div id="content">
//your content here!
</div>
</body>

</body></html>
30