I've tried a bunch of codes so far and nothing has lead me in thr right direction. I've also tried changing the image size in photoshop also. Please help !!!

3 answers

Jordan 469
2
points

First, make sure that all browsers have a 100% height, 0 margin, and 0 padding on the html and body tags:

<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>

Add the image you want as the background as the first element of the Web page, and give it the id of bg:

<body>
<img src="bgimage.jpg" alt="background image" id="bg" />
</body>

Position the background image so that it's fixed at the top left and is 100% wide and 100% in height. Add this to your style sheet:

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

Add all your content to the page inside of a division called "content". Add this below the image:

<div id="content">All your content here - including headers, paragraphs, etc.</div>

Because the background image is 100% in height, and the content division is after the image in the flow of the document - most browsers won't display it. Position your content so that it's relative and has a z-index of 1. This will bring it above the background image in standards-compliant browsers. Add this to your style sheet:

#content {
position:relative;
z-index:1;
}

But you're not done. Internet Explorer isn't standards compliant and still has some problems. There are many ways to hide the CSS from every browser but IE 6, but the easiest (and least dangerous) is to use conditional comments. Put the following after your style sheet: ...

<!--[if IE 6]> <![endif]-->

Inside the comment, add another style sheet with some styles to get IE to play nice:

 <!--[if IE 6]>
    <style type="text/css">
    html { overflow-y: hidden; }
    body { overflow-y: auto; }
    #bg { position:absolute; z-index:-1; }
    #content { position:static; }
    </style>
    <![endif]-->
Answered over 9 years ago by Jordan
  • Be warned that while this approach has the desired effect, it can wreak havoc with scripts which manipulate position of elements, e.g. menu systems. Been there, done that, the war wounds still ache. Richard Grevers over 9 years ago
1
point

While there are ways of doing this, scaled raster graphics are always going to look terrible and you should probably consider using multiple background images or Canvas tags or SVG or gradients or pretty much anything else to fill up your empty space.

Answered over 9 years ago by Nathan Duran
  • This is gonna be way easier to do with HTML 5... Looking forward to it ;) Menno Geelen over 9 years ago
0
points

As far as I know, this is not possible in CSS2. CSS3 has a property called background-size, you can strech a background using:

background-size: 100%;

But you could also use an image (<img> tag) with 100% height and width as a background. position:absolute or fixed.

Answered over 9 years ago by ReMichael