Jump to content


[ask]Another gradient background

Started by joe, Mar 07 2008 07:33 AM

12 replies to this topic

#1 joe

    Young Padawan

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

Posted 07 March 2008 - 07:33 AM

Hi everyone...
This topic still have connection between these topic.
In the beginning topic, i've got the answer on how to make gradient in my web page... but, now i've another question, if in the older one i ask how to create a gradient background example from black to white (black at the top and white on the bottom) and the gradient direction is from top to the bottom.
Now, my question is how if i put gradient direction opposite with the older one, gradient direction is from bottom page to the top. If that possible if i put it in the <body</body> in my CSS code ????
I've search in google and i don't get anything... :(
I've try by my self, but using HTML tag table... but the result doesn't satisfied me... :(

Thank you for your help... :)

regards,
joe

#2 Jacorre

    P2L Jedi

  • Members
  • PipPipPip
  • 824 posts
  • Gender:Male
  • Location:USA
  • Interests:Computers, Technology, Internet, Graphic/Web Design, Music, Soccer

Posted 07 March 2008 - 04:10 PM

You have the option to reverse the gradient in Photoshop when you're creating it.

#3 rc69

    PHP Master PD

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

Posted 07 March 2008 - 05:59 PM

Could you post the solution you had to the original topic? That we we can see if what you currently have just needs a few tweaks, or an entire face lift.

#4 joe

    Young Padawan

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

Posted 07 March 2008 - 11:17 PM

Ok, this is my source...

//css file :

td.gradient { 
	background: #FFFFFF url(images/myGradient.png) repeat-x left bottom; 
}

//html :
<html>
 <head>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0">
   <tr><td height = "500px"></td></tr>
   <tr><td class="gradient"></td><tr>
  </table>
 </body>
</html>

i want to the gradient position in the bottom of page (default), not in the top of page.. can i do it with out create table in body tag ??? for example, put it in the body tag...
the reason why i put in table tag, bcoz if i put in body through CSS file, the gradient position in the top of page...
hope all of you understand... :)

thank and regards,
joe...

Edited by joe, 08 March 2008 - 12:09 AM.

#5 rc69

    PHP Master PD

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

Posted 07 March 2008 - 11:58 PM 

html {
	background: #FFFFFF url(images/myGradient.png) repeat-x left bottom;
	height:100%;
}
Replace your css with that. Should work. If not, could you take a screen shot of what happens?

#6 joe

    Young Padawan

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

Posted 09 March 2008 - 10:21 PM

@rc69 :
thank you for reply my post...
but stil doesn't work to me... :P this the screenshot... here
the gradient still in the top of page... can the gradient position in the bottom of page ???

btw, i'm sorry for different color in the my capture and in my source... ^_^

regards,
joe..

#7 rc69

    PHP Master PD

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

Posted 10 March 2008 - 07:17 PM

There is no reason what i posted shouldn't work, but i figured something would go wrong.

Could you post the entire .html file you are working with so i can make sure you copied everything correctly?

Also, you could try adding ", body" after the html in my above example (i.e. "html, body {")

Edited by rc69, 10 March 2008 - 07:17 PM.

#8 joe

    Young Padawan

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

Posted 14 March 2008 - 07:21 AM

Hi rc69...
thank you very much for attention bout my question... :)
i do apologize if i'm late to reply your posting..

this is my source after i correct with you suggest to me..

the html code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test-css-layout.css" rel="stylesheet" type="text/css"/>
<title></title>
</head>

<body>
</body>
</html>

the css code :
html, body {
	background:#7b013e url(bgGradient_17.png) repeat-x left bottom;
	height: 100px
}

correct me if i'm wrong... :)

regards,
joe..

#9 rc69

    PHP Master PD

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

Posted 14 March 2008 - 04:32 PM

Quote

html, body {
background:#7b013e url(bgGradient_17.png) repeat-x left bottom;
height: 100px
}
Should be - height:100%; (percent, not px).

#10 joe

    Young Padawan

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

Posted 16 March 2008 - 08:26 AM

View Postrc69, on Mar 15 2008, 04:32 AM, said:

Quote

html, body {
background:#7b013e url(bgGradient_17.png) repeat-x left bottom;
height: 100px
}
Should be - height:100%; (percent, not px).

hi rc69..
gud evening... :lol:

thank you for your correction... :)
sorry for my mistake... :( i've try and it answer my question... :)

btw, may i ask question about that source... sorry if this a noob question..
why should i put the background in HTML and BODY tag ??? coz, if i put only in the BODY the gradient only show in the bottom page... can you explain to me the logic ???

thank you so much... :)

best regards,
joe..

#11 rc69

    PHP Master PD

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

Posted 16 March 2008 - 12:37 PM

To get the <body> to stretch to the height you need for the gradient to be at the bottom of the page, you need to first make the <html> element big enough to get to the bottom of the page.

Following your logic, you would actually need only the html selector in there and not the body one. Why both though? Dunno, habit i guess (i think i forgot the actual reasoning a long time ago).

#12 joe

    Young Padawan

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

Posted 17 March 2008 - 09:37 AM

View Postrc69, on Mar 17 2008, 12:37 AM, said:

To get the <body> to stretch to the height you need for the gradient to be at the bottom of the page, you need to first make the <html> element big enough to get to the bottom of the page.

Following your logic, you would actually need only the html selector in there and not the body one. Why both though? Dunno, habit i guess (i think i forgot the actual reasoning a long time ago).

ok..
thank you so much for your explanation, rc69... :P
you may closed this topic..
hope this can help someone out there... :)

regards,
joe..

#13 rc69

    PHP Master PD

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

Posted 17 March 2008 - 04:12 PM

np
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design