6 replies to this topic

[joe]

Hi...

I wondering, i want to create a web background gradient from black to white... but the gradient from bottom to up, where the gradient / color transition from black to white only 20px (height) after that background come to white.
For example : the document have height 800px, color transition / gradient from black to white only in 20px from the bottom page.
How to do that ??? is there any link / resource for me to learn more ???

thank you very much...

[rc69]

You need to use a background-image. Save a picture of the gradient you want, set it as the background, and set the background-repeat to repeat-x.

i.e.

body { background: #FFFFFF url(images/gradient.gif) repeat-x left bottom; }

http://www.google.co...ackground-image

[Leibrockoli]

Through the use of CSS, place this in your stylesheet (.CSS) or <style> header.

body {
		background-color: #FFFFFF; // white HEX
	background-image: url(http://www.example.com/gradient.gif); //image
	background-repeat: repeat-x; //which axis to repeat in
}

You can easily find any web development tutorials site, even here on Pixel2Life you might find a quick lesson, but I find http://www.w3schools.com/ helpful.

Edited by Leibrockoli, 27 February 2008 - 05:15 PM.

[joe]

@rc69 :
thank you very much... i've learn and try by myself...
i've search in google and find the tutorial...
thank you..

@Leibrockoli :
thank you for your reply tooo...
in your script have same meaning with rc69 script...
and thank you for your suggest...

[Leibrockoli]

Actually ours differ. He's telling you to use a property background:, while I tell you about background-color: and background-image:, which differ completely. He also doesn't seperate the properties with semi-colons.

But aside from the point, he does have the right idea.

[rc69]

Don't forget, you also use the background-repeat property.

Ours differ only in that mine is shorthand (a method i prefer since it saves space). The downside of shorthand is that it only makes sense to those who know the properties. Your method is probably easier to understand as it list the individual properties, so there is no mystery behind what is going on.

So what joe said was right, they have the same meaning.

[joe]

rc69, on Feb 29 2008, 11:55 AM, said:

Don't forget, you also use the background-repeat property.

Ours differ only in that mine is shorthand (a method i prefer since it saves space). The downside of shorthand is that it only makes sense to those who know the properties. Your method is probably easier to understand as it list the individual properties, so there is no mystery behind what is going on.

So what joe said was right, they have the same meaning.

thank you rc69, for your explanation...
for both of you, thank you so much..