Is there a way to make the gradient only show once (at the top) then once the gradient image ends (bottom of the gradient background image) - have a solid colour for the rest of the page?
Like this:
Thanks in advance.
0
Background Image / Gradient Woes
Started by [mez], Mar 28 2005 02:09 AM
10 replies to this topic
#1
-
- Members
-
- 96 posts
Young Padawan
- Location:Brisbane, Australia
Posted 28 March 2005 - 02:09 AM
I want to have a gradient (vertical) as a background on my website but once the page reaches a height that is larger than the gradient - the gradient background image is repeated.
Is there a way to make the gradient only show once (at the top) then once the gradient image ends (bottom of the gradient background image) - have a solid colour for the rest of the page?
Like this:
Thanks in advance.
Is there a way to make the gradient only show once (at the top) then once the gradient image ends (bottom of the gradient background image) - have a solid colour for the rest of the page?
Like this:
Thanks in advance.
#2
-
- Members
-
- 822 posts
P2L Jedi
- Interests:My interests are my:<br><br>iidsite - http://iid.outer-heaven.net<br>iidblog - http://iid.outer-heaven.net/blog/<br>iidcommunity - http://iid.outer-heaven.net/forums/<br>P2L - http://www.pixel2life.com
Posted 28 March 2005 - 03:45 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #999999;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.gradient {
background: url(image url here);
}
-->
</style></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="gradient" height="368">Add content here like the banner and some other content that gets updated often like Latest Tut, SOTW, wSOTW, 5 latest threads on forum etc... </td>
</tr>
<tr>
<td>Content and any extra side bars go here </td>
</tr>
</table>
</body>
</html>
Try creating your layout around this? It's the only way I can think of atm
I made an image to explain better
Based of your current site layout (Photochop)
#3
-
- Members
-
- 96 posts
Young Padawan
- Location:Brisbane, Australia
Posted 28 March 2005 - 04:27 AM
Thanks so much!
#4
-
- Members
-
- 822 posts
P2L Jedi
- Interests:My interests are my:<br><br>iidsite - http://iid.outer-heaven.net<br>iidblog - http://iid.outer-heaven.net/blog/<br>iidcommunity - http://iid.outer-heaven.net/forums/<br>P2L - http://www.pixel2life.com
Posted 28 March 2005 - 04:42 AM
Its alright 
#5
-
- Members
-
- 463 posts
Rooster
- Gender:Male
- Location:Littleton, CO
- Interests:Web Design, Programming, Client Management, Web Hosting, Tutorial Writing
Posted 28 March 2005 - 10:06 AM
PLEASE, PLEASE DO NOT DO IT THE WAY INFNIT SAYS!!!! He still uses tables and they are ugly, and it is so easy to do =)
In your CSS do this for the background:
What this does is tells the CSS the color of the background, the image that is suppose to go on it, the position (top and left) and then to repeat, in this case it repeats horizontally (the gradient still faces vertically).... then the fixed background attachment has the background stay in the same spot all the time when someone scrolls.
Hope I helped =), sorry for putting you down InFnit, maybe you learned something too
.
In your CSS do this for the background:
body { background: #FFF url(BG.GIF) top left repeat-x; background-attachment: fixed; }
What this does is tells the CSS the color of the background, the image that is suppose to go on it, the position (top and left) and then to repeat, in this case it repeats horizontally (the gradient still faces vertically).... then the fixed background attachment has the background stay in the same spot all the time when someone scrolls.
Hope I helped =), sorry for putting you down InFnit, maybe you learned something too
.
#6
-
- Members
-
- 96 posts
Young Padawan
- Location:Brisbane, Australia
Posted 28 March 2005 - 10:23 PM
Excellent! Thanks Spook
#7
-
- Members
-
- 822 posts
P2L Jedi
- Interests:My interests are my:<br><br>iidsite - http://iid.outer-heaven.net<br>iidblog - http://iid.outer-heaven.net/blog/<br>iidcommunity - http://iid.outer-heaven.net/forums/<br>P2L - http://www.pixel2life.com
Posted 28 March 2005 - 10:57 PM
Thnaks i did 
#8
-
- Members
-
- 463 posts
Rooster
- Gender:Male
- Location:Littleton, CO
- Interests:Web Design, Programming, Client Management, Web Hosting, Tutorial Writing
Posted 28 March 2005 - 11:30 PM
Your are very welcome you two, glad I could be of assistance... I rock, two birds, one code .
.
#9
-
- Members
-
- 822 posts
P2L Jedi
- Interests:My interests are my:<br><br>iidsite - http://iid.outer-heaven.net<br>iidblog - http://iid.outer-heaven.net/blog/<br>iidcommunity - http://iid.outer-heaven.net/forums/<br>P2L - http://www.pixel2life.com
Posted 29 March 2005 - 02:49 PM
What if I want a vertical tile?
#10
-
- Members
-
- 96 posts
Young Padawan
- Location:Brisbane, Australia
Posted 29 March 2005 - 09:12 PM
That is the code for a vertical gradient image...
You mean a horizontal gradient?
You mean a horizontal gradient?
#11
-
- Members
-
- 463 posts
Rooster
- Gender:Male
- Location:Littleton, CO
- Interests:Web Design, Programming, Client Management, Web Hosting, Tutorial Writing
Posted 29 March 2005 - 09:27 PM
repeat-x (horizontal repeat)
repeat-y (vertical repeat)
no-repeat (no repeat)
repeat-y (vertical repeat)
no-repeat (no repeat)
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
