Gradient Background

asgsoft · 28-05-2005, 20:20

This is pretty simple but very useful and looks very nice.
First load up your favourite drawing program and make an image of a width of 1 px and a height of 1000 px.
Creat a gradient from blue to white.
Save it as gradient.png
In dreamweaver add the following in your head tag:

PHP Code:

  <style type="text/css">

 
body {

background-color: #FFFFFF; //last colour of the gradient in this case it was white

background-image: url(gradient.png); // set image

background-repeat: repeat-x; //repeat only in x axis direction

}

</style>

The comments are quite self explanatory. If you need any help please feel free to contact me.
PLEASE REMOVE ANY TEXT AFTER THE // AS IT WILL NOT WORK OTHERWISE.

Lewis · 29-05-2005, 11:30

good simple tutorial, thanks for that!

FrozenDice · 09-06-2005, 07:42

What? Wtf?! This is obvious how does this qualify as a tutorial? 1000px? why not just make 768 which is the highest screen res that almost anyone uses.

Shwaza · 12-06-2005, 17:19

Quote:

Originally Posted by FrozenDice

What? Wtf?! This is obvious how does this qualify as a tutorial? 1000px? why not just make 768 which is the highest screen res that almost anyone uses.

Umm, have you ever heard of a magical little bar on the right hand side of most websites? It's called a scroll bar

And most sites are longer than just the height of someone's resolution

28-05-2005, 20:20	#1 (permalink)
asgsoft WMT Addict Join Date: Apr 2005 Location: Brighton,UK Posts: 162 iTrader: 0 / 0%	Gradient Background This is pretty simple but very useful and looks very nice. First load up your favourite drawing program and make an image of a width of 1 px and a height of 1000 px. Creat a gradient from blue to white. Save it as gradient.png In dreamweaver add the following in your head tag: PHP Code: `<style type="text/css"> body { background-color: #FFFFFF; //last colour of the gradient in this case it was white background-image: url(gradient.png); // set image background-repeat: repeat-x; //repeat only in x axis direction } </style>` The comments are quite self explanatory. If you need any help please feel free to contact me. PLEASE REMOVE ANY TEXT AFTER THE // AS IT WILL NOT WORK OTHERWISE.

29-05-2005, 11:30	#2 (permalink)
Lewis Super Moderator Recent Blog: [CaRP] (6) [CaRP] XML error: Mismatched tag at line 6 - This appears to be an HTML webpage, not a feed. Join Date: Apr 2005 Location: Leics, UK Posts: 1,000 iTrader: 0 / 0%	good simple tutorial, thanks for that! __________________ NewsBarrel.com Everything is banal and jejune, There is a planetary conspiracy against the likes of you and me in this idiot constituency of the moon, Well, he knew exactly who to blame, And we call upon the author to explain.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Gradient Background	01wojtowicz	Flash Articles	0	05-07-2005 17:26

09-06-2005, 07:42	#3 (permalink)
FrozenDice Senior Member Join Date: Jun 2005 Posts: 389 iTrader: 0 / 0%	What? Wtf?! This is obvious how does this qualify as a tutorial? 1000px? why not just make 768 which is the highest screen res that almost anyone uses.

Gradient Background

Gradient Background

Similar Threads