So, jetzt bin ich mal dazu gekommen, das auszuprobieren.
Leider hat das nicht gelappt, Jowra. Schade auch, aber danke schonmal für die Hilfe.
Background images without tiling or how to stretch a background image to fill a browser window
To be able to do this the following code is used...
<body style="margin: 0px; padding: 0px;">
<div style="width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 0;">
</div>
<div style="z-index: 1; position: absolute;">
The actual page code .....
</div>
</body>The image will not tile and is automatically dimensioned to fill the browser window. Take care to choose an image where it doesn't matter too much if a lot of distortion occurs. The code is demonstrated here.
The above code only works properly if the HTML page length is less than the picture height. If the main text of the page is longer than the background image you get a white space under the image. Here's what happens and how it can be reproduced in Firefox, IE, Mozilla, Netscape and Opera. If the text is longer than the image and the browser window is smaller than the image then when you scroll down you get a white space under the image. The code does exactly what it was supposed to, fills the browser window with the image. Because the text is longer than the window then the scroll bars appear on the right. Scrolling down the page means the background suddenly ends. This is because it was sized to the original window, not the actual page length. It's also fixed to the top left of the page.
Solution 1 - Using JavaScript - This is demonstrated here
The problem with this solution is that it's jerky. Even taking the timing interval down to 10 thousandths of a second it's still jerky. The specific IE problem is that the browser allows you to scroll past the end of the second DIV. In fact, as far as I can tell the apparent page length is infinite.
Solution 2 - CSS - This is demonstrated here
This is far easier to cope with. It uses the CSS FIXED method. The specific problem with IE in this case is that it doesn't recognize the FIXED property. So it simply doesn't work properly.
Solution 3 - Improved CSS - This is demonstrated here
The last and best of the codes, this seems to work properly and without a load of jerking around. It uses two CSS files, one for all browsers except IE and another specifically for IE.
To use the method above, put this in the HEAD section of your page...
<style type="text/css">
@import "bgall.css";
</style>
<!--[if IE]>
<link
href="../test/bgie.css"
rel="stylesheet"
type="text/css"
media="screen">
<script type="text/javascript">
onload = function() { content.focus() }
</script>
<![endif]-->
</style>The BODY section of the page looks like this...
<body>
<div ID="fixedbg">
</div>
<div ID="content">
The actual page code .....
</div>
</body>CSS files are normal, plain text files. bgall.css looks like this...
Media screen
{
body
{
margin: 0px;
padding: 0px;
}
div#fixedbg
{
overflow: auto;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 0;
}
div#content
{
z-index: 1;
position: absolute;
left: 0px;
top: 0px;"
}
}and bgie.css looks like this...
body
{
height: 100%;
overflow: hidden;
font-size: 100%;
}
div#content
{
width: 100%;
height: 100%;
overflow: auto;
}
div#fixedbg
{
position: absolute;
}
http://members.lycos.co.uk/brisray/web/imagesg.htm
Hört sich gut an, allerdings für einen Semiprofi wie mich sehr kompliziert. Was eignet sich denn davon eurer Meinung nach am BEsten, und wie setz ich das dann um?
Vielen lieben Dank.