Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Fading Background on websites?

S

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!
 
You should use the no-repeat, repeat-x and repeat-y to achieve this...

Se if this old thread is helpful: https://forums.macrumors.com/threads/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

  • dill.gif
    dill.gif
    2.1 KB · Views: 1,162
Mitthrawnuruodo said:
You should use the no-repeat, repeat-x and repeat-y to achieve this...

Se if this old thread is helpful: https://forums.macrumors.com/threads/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:
Click to expand...


ahhhh! Thanks so much.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back