Help with background image

Research background-attachment: fixed and http://www.cssplay.co.uk/layouts/background.html

edit - took too long to reply. Already covered.

Hey Deuce,

The link you posted is broken. Do you have another?

Link works for me.
Do a search for "CSS 100% background"

Thanks! It's working now. Guess it was down temporarily.

Ok, so the background-attachment: fixed; worked. Thanks! But is there a way to make the site/background scale better? I have a 17" MacBook Pro and it looks great on my comp, but on my wife's 13" MacBook Pro it's not as great.

Just as an example: http://www.rollingstone.com . The background image on the site looks great on both my 17" MacBook and my wife's 13". It seems like it's scaling to fit each computer/browser?

Yup, because that's what you asked for.

Oh, I see what you're saying now.
The site you mentioned is using javascript to resize an image tag.

I meant the RollingStone site is scaling. Mine is not.

Looks like we posted at the same time, read above.

Ah ha! That's what I figured. Thanks!

Hmmm....I'm seeing more and more sites with a background image that spans well across multiple screen sizes.

thafeedback[dot]com
thebrokenbrownegg[dot]com

Can anyone help me optimize my background image so that the container is centered and the sides of my background image peek out on the sides evenly?

Just to note: This is the view I get on my MBP. Notice to the right, there's black space. I know this is because I've resized the image down in PhotoShop, but I did that because when I had it at full-size, the site looked terrible on smaller screen sizes.

Anyone else have different solutions?

I'm not sure whether this will help with a bg, but..

You can use CSS to scale an image (img-tag) - I'm not sure how you can do it for a bg without js.

Here's how:

Choose height/width fit(replace the appropriate places in the code).

You'll need to put the image in a div, like so :

<div id="mainContent"><img alt="snoopy" src="snoopy.gif"/></div>

then do :

	<style type="text/css">
 
body {background:black;overflow:hidden;margin:0;padding:0;text-align:center}
#mainContent {position:relative;top:0;margin:0;border:0;padding:0;height:100%;overflow:hidden} 
#mainContent img {height:100%;border-style:none}
 
	</style>
 
<!--[if IE]>
<style type="text/css">
#mainContent {width:100%;overflow:auto}
</style>
<![endif]-->

Link to example : http://cs.debayangupta.com/web/special/fitImage.htm

Works pretty much everywhere (IE6+8/FF/Chrome/Opera..).

Back when I built this, I was using html 4.01 tr - later, when I tried changing the doctype, it stopped working .. there's probably some dumb thing somewhere causing it.. I'm just too lazy to correct it ('til I _need_ it).