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!
Background fade 3
- Thread starter NetworkGuy101
- Start date
- Status
-
1
- #3
*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
taylorantone
MIS
Incidentally, any sort of gradiant image you see on a website is 99.9999% of the time an image too.
-
2
- #7
I use one too the image is Created it in Photoshop made a large image with a gradient then resized it to 5px wide. Easy
Glen
Glen
- Thread starter
- #8
NetworkGuy101
IS-IT--Management
Well how does the fade effect happen. A 1 by 1 pixel would repeated would just be the same color for the whole background correct?
You use a thin but long image, I use 5px by 800px. If you look at the image link I posted you will understand better, I hope.
Glen
Glen
- Thread starter
- #10
NetworkGuy101
IS-IT--Management
Thanks,
I took what you said but I did this to it
body {
background-image: url(/Images/backtest.png);
background-attachment: fixed;
}
That way the fade stays fix through out the whole page.
I took what you said but I did this to it
body {
background-image: url(/Images/backtest.png);
background-attachment: fixed;
}
That way the fade stays fix through out the whole page.
- Thread starter
- #11
NetworkGuy101
IS-IT--Management
Check it out @
Thanks for the help. Although is there a way to stretch the image so it doesnt have to be fixed. Like 100% height?
Thanks for the help. Although is there a way to stretch the image so it doesnt have to be fixed. Like 100% height?
Not that I'm aware of. Good question though, Anyone??? Maybe You cFlava, you are the top MVP!!!!!.
Glen
100% height is not possible in CSS unless the object whose height you are defining has a parent with a set height. For example, if you have a <div> with a height of 600px, then you can set an element inside that div to have a height of 100%.
One way of "setting 100% height" is to have a JS function called from the onload event that will test for available width and resize an image or element based on that size.
Take a look at home page for a pretty cool background fade effect. I think it's more what you may want.
*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
One way of "setting 100% height" is to have a JS function called from the onload event that will test for available width and resize an image or element based on that size.
Take a look at home page for a pretty cool background fade effect. I think it's more what you may want.
*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
When doing blends like these as backgrounds I make a very long thin one and fix it to the bottom of the window.
Tends to work quite nicely, especially if the image is something like 2000px high.
Otherwise set the background colour to be the "end" colour of the blend so you see no join.
- Web design and ranting
- Day of Defeat gaming community
"I'm making time
Tends to work quite nicely, especially if the image is something like 2000px high.
Otherwise set the background colour to be the "end" colour of the blend so you see no join.
- Web design and ranting
- Day of Defeat gaming community
"I'm making time
imstillatwork
IS-IT--Management
I try not to make the image any more then a few hundren pixels tall, and then use a solid color background to finish the page off like:
This works in IE
# 6 is right to left and #7 is left to right.
Try this site for info
Glen
Code:
<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(duration=2,transition=7)">
<META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(duration=2,transition=6)">Try this site for info
Glen
taylorantone
MIS
Odd that I don't get page transition effects on Macromedia's site, and I'm using IE.
imstillatwork
IS-IT--Management
I always have page transitions turned off in IE. kind of annoying they are.
- Status
Similar threads
- Question
- Locked
- Question