Im just beginning to make my web page. I want to fade the background. I want 5 different colors in my background. They are "0000FF", "0033FF", "0066FF", "0099FF", and "00CCFF". I want "0000FF" at the top and I want "00CCFF" at the bottom and the rest of the colors in between obviously. How do I fade backgorund colors using HTML??
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
How do I fade background colors using HTML??
- Thread starter quazia83
- Start date
You can't. At the moment, you can only have one background color. An alternative is to have 5 boxes, each with the background of the color you want. Lastly and possibly the best solution is to make a graphic of the fading colors and apply it as a background image.
- Thread starter
- #3
Thanks so much great friend. Before I asked this question, I searched the web and found that you can add faded backgrounds to html pages. But you have to use DHTML. I havent figured out how to make it fill the whole page, just one line of the page.
BillyRayPreachersSon
Programmer
DHTML != HTML.
DHTML == HTML + JavaScript (or another scripting language)
HTML has no scripting abilities. Therefore, you would need to use JavaScript (or another scripting language) to do this programatically.
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")
DHTML == HTML + JavaScript (or another scripting language)
HTML has no scripting abilities. Therefore, you would need to use JavaScript (or another scripting language) to do this programatically.
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
- Thread starter
- #5
- Thread starter
- #7
keen01's suggestion is the correct one. You don't need JavaScript for this, you only need CSS. Consider the following style tag:
The bg.gif is a small thin image that has the fades built via a program such as Photoshop. The color that the image fades "into" is the #B6B8A6. The "repeat-x fixed top" says to put the image at the top, leave it fixed there, but to repeat the image "across" the browser window.
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
Code:
body {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
padding: 0;
margin: 0 auto;
text-align: center;
background: #B6B8A6 url(images/bg.gif) repeat-x fixed top left;
}The bg.gif is a small thin image that has the fades built via a program such as Photoshop. The color that the image fades "into" is the #B6B8A6. The "repeat-x fixed top" says to put the image at the top, leave it fixed there, but to repeat the image "across" the browser window.
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
BillyRayPreachersSon
Programmer
Sorry - I had misunderstood your original post. I had thought you wanted a dynamic fade, which was automatically generated - thus the script suggestion.
If you want just to have a fade, with set colours bands at set sizes, you can do it with HTML and CSS - without using images. Just use absolute positioned DIV elements. For example:
Hope this helps,
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
If you want just to have a fade, with set colours bands at set sizes, you can do it with HTML and CSS - without using images. Just use absolute positioned DIV elements. For example:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>Colour bands</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
background-color: #00CCFF;
}
#fadeBands {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
z-index: 1;
}
#pageContent {
position: relative;
z-index: 2;
}
.fadeBand {
height: 20px;
}
.bandColour1 {
background-color: #0000FF;
top: 0px;
}
.bandColour2 {
background-color: #0033FF;
top: 20px;
}
.bandColour3 {
background-color: #0066FF;
top: 40px;
}
.bandColour4 {
background-color: #0099FF;
top: 60px;
}
</style>
</head>
<body>
<div id="fadeBands">
<div class="fadeBand bandColour1"></div>
<div class="fadeBand bandColour2"></div>
<div class="fadeBand bandColour3"></div>
<div class="fadeBand bandColour4"></div>
</div>
<div id="pageContent">
<h1>A test heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.</p>
</div>
</body>
</html>Hope this helps,
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
- Thread starter
- #10
i want the colors to blend in a little bit where one color ends and another color starts. I dont want them to look like frames or anything, just one smooth fade spanning the whole page. i want each page to have a different layout as well, so i realize that i have to use css in each of my html pages.
BillyRayPreachersSon
Programmer
Then you would need to use images or scripting.
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
There is an IE (5.5+) option that will do this automatically for you, and much more,... but... it is IE only and wont work in any other browser.
Allows transitions and filters and other nice ideas... just a shame it only works in IE.
You could also use SVG (Scalable Vector Graphics) which I believe is supported natively by Mozilla based browsers and as an ActiveX control for IE - not sure of which versions though, or how well they support it.
Otherwise, do what the rest of us do, and create an image..
A smile is worth a thousand kind words. So smile, it's easy!
Allows transitions and filters and other nice ideas... just a shame it only works in IE.
You could also use SVG (Scalable Vector Graphics) which I believe is supported natively by Mozilla based browsers and as an ActiveX control for IE - not sure of which versions though, or how well they support it.
Otherwise, do what the rest of us do, and create an image..
A smile is worth a thousand kind words. So smile, it's easy!
BillyRayPreachersSon
Programmer
Or use scripting to make a non-image, cross-browser version.
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
Dan,
I'm intrigued... how would you generate a gradient using javascript... the only way I can think of (which is pretty ugly) is to create a load of divs (or similar) about 1 or 2 pixels wide that span the length of the area and fill each one with a colour that blends from left to right (or top to bottom) (which can be calculated easily in javascript from a start and end colour). This would work, but is pretty hideous, and probably slower to load and control (resizing of windows etc) than a simple image, or SVG.
Be interested to know - if it's quite simple I may use it myself. (as long as the size of the script doesn't exceed the size of an equivalent image or SVG markup you could alternatively use to be fairly cross-browser compatible).
A smile is worth a thousand kind words. So smile, it's easy!
I'm intrigued... how would you generate a gradient using javascript... the only way I can think of (which is pretty ugly) is to create a load of divs (or similar) about 1 or 2 pixels wide that span the length of the area and fill each one with a colour that blends from left to right (or top to bottom) (which can be calculated easily in javascript from a start and end colour). This would work, but is pretty hideous, and probably slower to load and control (resizing of windows etc) than a simple image, or SVG.
Be interested to know - if it's quite simple I may use it myself. (as long as the size of the script doesn't exceed the size of an equivalent image or SVG markup you could alternatively use to be fairly cross-browser compatible).
A smile is worth a thousand kind words. So smile, it's easy!
BillyRayPreachersSon
Programmer
You would do just that. Given a start colour and an end colour, you would calculate (based on the desired height of the gradient) how many DIVs are required. They would be dynamically generated, and coloured as appropriate.
Much like my solution above, but with dynamic creation of the DIVs instead of having them hard-coded on the page. Along with other people, I've posted gradient routines in the JS forum before, so it shouldn't be too hard to pick one to use.
However, ugly is not a word I would use to describe this solution. Nor "pretty hideous", or "slower to load" (the whole code would probably be a similar number of, if not less, bytes than the image you are proposing using).
As for resizing? DIV elements take up 100% of the width of their parent element by default, so even if the body is resized, they would automatically be the correct width.
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
They might grow, but you want the gradient to be as finely stepped as possible, so you may not want them to grow too big - if it started at say 50px then was stretched to 1000px (each div now 20px wide or high), you would see colour banding emerge if the colour codes weren't sufficiently close together.
Probably ok for most requirements and I'm sure an issue that could be worked with and overlooked, but not universal.
Anything that is overly complex is ugly - an image of the same or very simlar size is a far simpler way of coding the solution.. unnecessary code is ugly. The most elegant solution is the way that most simply and efficiently achieves the objective. Removing half-a-nano-second from the load time by having a whole bunch of code that dynamically does this or that to achieve the same thing is not an improvement in my eyes.
If the user wanted a circular or diagonal gradient then this would probably be 'quicker to load' than a big picture.. probably. However, loading enough DIVs into the rendering engine to facilitate this would concern me..
Also, as I've browsed the web and investigated what techniques are used, it seems that the image approach is the favourite, by a long way. Not to say that this is a 'bad idea' - in fact, nice thinking, just probably not right for this requirement.
Addendum: I suggested in my previous post that SVG was natively supported by the Mozilla browsers.. not entirely correct (apologies) it is yet to be put into Firefox (predicted v1.1) or fully supported elsewhere, but it is available if you want to download the special build versions.
A smile is worth a thousand kind words. So smile, it's easy!
BillyRayPreachersSon
Programmer
I assumed the gradient was vertical (i.e. top-bottom), so resizing horizontally would not be a problem. I had also assumed that the gradient height would not change regardless of the window size - much like the image solution. That being the case, resizing is not an issue.
You seem to imply that using scripting over an image is overly complicating things - I do not believe that this is the case. They are different ways of achieving the same goal.
What happens when the spec changes from a blue gradient to a green one? With an image, you'd have to create it again, and re-upload it. With scripting, you'd simply change the colour values.
At the end of the day, it really doesn't matter whether an image or scripting is used, and as you say, some people prefer the image method. However, I like a challenge, and I really get a kick out of writing code... so I'm always going to be biased in favour of coding solutions ;o)
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
You seem to imply that using scripting over an image is overly complicating things - I do not believe that this is the case. They are different ways of achieving the same goal.
What happens when the spec changes from a blue gradient to a green one? With an image, you'd have to create it again, and re-upload it. With scripting, you'd simply change the colour values.
At the end of the day, it really doesn't matter whether an image or scripting is used, and as you say, some people prefer the image method. However, I like a challenge, and I really get a kick out of writing code... so I'm always going to be biased in favour of coding solutions ;o)
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
True - I do like the idea and have done similar things to 'animate' a page intro with fades, resizing, movement etcetc, which all worked really well, but took a fair bit of code and time - though was fun to write. This was a 'test site/sandbox' though, nothing I needed to worry about supporting.
When I came to do something similar for a production site, I used Swish to write a Flash solution - took me about 30 minutes to develop and deploy, and looked as good if not better than my javascript solution - and (considering images etc) was little more in size.
And of course, ideally this should be part of the presentation markup functionality - i.e. SVG... we live in hope.. ;-) And sadly more browsers support images than javascript. Also, for a beginner, images are easier to implement.
A smile is worth a thousand kind words. So smile, it's easy!
When I came to do something similar for a production site, I used Swish to write a Flash solution - took me about 30 minutes to develop and deploy, and looked as good if not better than my javascript solution - and (considering images etc) was little more in size.
And of course, ideally this should be part of the presentation markup functionality - i.e. SVG... we live in hope.. ;-) And sadly more browsers support images than javascript. Also, for a beginner, images are easier to implement.
A smile is worth a thousand kind words. So smile, it's easy!
BillyRayPreachersSon
Programmer
I just couldn't hold back any longer... my fingers were itching to work on this... sorry ;o)
thread216-1068241
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
thread216-1068241
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
BillyRayPreachersSon
Programmer
P.S. Tested working on IE/Win 6, NN/Win 7, Opera/Win 7, FF/Win, FF/Mac, Safari/Mac.
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
- Status
Similar threads
- Question
- Locked
- Question