Jump to content


[ask]About Gradient at Background


6 replies to this topic

#1 joe

    Young Padawan

  • Members
  • Pip
  • 115 posts
  • Location:stuck in the middle of cyber space

Posted 26 February 2008 - 09:55 AM

Hi... :D

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... :)

#2 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 26 February 2008 - 08:20 PM

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; }

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

#3 Leibrockoli

    Young Padawan

  • Members
  • Pip
  • 27 posts

Posted 27 February 2008 - 05:14 PM

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.


#4 joe

    Young Padawan

  • Members
  • Pip
  • 115 posts
  • Location:stuck in the middle of cyber space

Posted 27 February 2008 - 09:03 PM

@rc69 :
thank you very much... i've learn and try by myself... :D :D
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... :)

#5 Leibrockoli

    Young Padawan

  • Members
  • Pip
  • 27 posts

Posted 27 February 2008 - 09:17 PM

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. :D

#6 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 28 February 2008 - 11:55 PM

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.

#7 joe

    Young Padawan

  • Members
  • Pip
  • 115 posts
  • Location:stuck in the middle of cyber space

Posted 02 March 2008 - 02:06 PM

View Postrc69, 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.. :)





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users