Fading Background on websites?

stevehp

macrumors 6502
Original poster
Sep 4, 2006
459
0
It's not a house, it's a home.
Hi All,

I am trying to figure out how to fade a background image into the normal background colour of the site...I know how to make the background file...ie - a file a few pixels high and wide, but how do I make sure when someone looks at the page on a giant screen the background doesn't repeat...here is an example...

http://www.apple.com/ipod/nike/

thanks so much!
 

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
13,792
150
Bergen, Norway
You should use the no-repeat, repeat-x and repeat-y to achieve this...

Se if this old thread is helpful: http://forums.macrumors.com/showthread.php?t=220400 :)

Edit: Nevermind that old thread, do something like this (;)):

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
	<title>New Page</title>
	<style type="text/css">
		body { 
			color: #333;
			background: #eee url(dill.gif) repeat-x;
		}
	</style>
</head>
<body>

</body>
</html>
And use something like this image, a gif with a gradient made in Photoshop from Black to #EEE, the same as the background colour:
 

Attachments

stevehp

macrumors 6502
Original poster
Sep 4, 2006
459
0
It's not a house, it's a home.
Mitthrawnuruodo said:
You should use the no-repeat, repeat-x and repeat-y to achieve this...

Se if this old thread is helpful: http://forums.macrumors.com/showthread.php?t=220400 :)

Edit: Nevermind that old thread, do something like this (;)):

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
	<title>New Page</title>
	<style type="text/css">
		body { 
			color: #333;
			background: #eee url(dill.gif) repeat-x;
		}
	</style>
</head>
<body>

</body>
</html>
And use something like this image, a gif with a gradient made in Photoshop from Black to #EEE, the same as the background colour:

ahhhh! Thanks so much.
 

SBT

macrumors member
Apr 5, 2006
42
0
England
If the page changes in height. Make sure the background colour is the same as the bottom colour of the gradient (as if it only repeating on the X axis then the image should stop but the text continue. Also you could make the background static ("fixed" as it is known) but problems may arise when people view the site with different screen sizes and resolutions.