Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Background Fading - possible? - hopw to?


  • Please log in to reply

#1
911pchelp

911pchelp

    Member

  • Member
  • PipPipPip
  • 290 posts
Is it possible to have a background that 'fades' across the page (i.e. starts as light green on left side and changes - gradually - to very dark green on right side)? :whistling: :blink:

If possible, do I need special software? (Don't see how it can be done with 'straight' HTML.)
  • 0

Advertisements


#2
TaNkZ101

TaNkZ101

    Member

  • Member
  • PipPipPip
  • 327 posts
if you have fireworks or photoshop it's like 2 clicks- use the gradient tool. I don't think it's possible in html, but i'm not sure.
  • 0

#3
911pchelp

911pchelp

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 290 posts
Thank you
Dont hv either but do hv photo shop pro 7 ... do you know if that will work?
  • 0

#4
911pchelp

911pchelp

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 290 posts
oops meant piant shop pro 7
  • 0

#5
Dragon

Dragon

    All Around Computer Nut

  • Retired Staff
  • 2,678 posts
you would be able to accomplish the same thing with psp7.

the only problem will be that you won't have the availability, like Fireworks has, to make small slices of the image so it loads faster.

if you do use psp7, then make sure you save it in a compressed format such as .GIF or JPG.
  • 0

#6
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Play with this and see if it does what you want:

<script type="text/javascript">
<!--
/*Background fade by Dave Methvin,
Windows Magazine
May be used/modified if credit line is
retained*/
function BgFade(red1, grn1, blu1, red2,
grn2, blu2, steps) {
sred = red1; sgrn = grn1; sblu = blu1;
ered = red2; egrn = grn2; eblu = blu2;
inc = steps;
step = 0;
RunFader();
}
function RunFader() {
var epct = step/inc;
var spct = 1 - epct;
document.bgColor =
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
if ( step < inc ) {
setTimeout('RunFader()',50);
}
step++;
}
BgFade(0x00,0x00,0x00, 0xFF,0xFF,0xFF,10);
//-->
</script>

Simply cut and paste the script into the <HEAD> section of your webpage. Increase the speed of the fading by changing 50 to a lesser positive number (ie: 20). Change the fade-from and fade-to color by entering new hex values for the two colors, the (00,00,00) being the fade-from color, the others being the fade-to color.

Ron
  • 0

#7
TaNkZ101

TaNkZ101

    Member

  • Member
  • PipPipPip
  • 327 posts
I made my header with fireworks, hwo would i make it so it loads the fastest possible? save as gif? or how do i save with these layers?
  • 0

#8
Dragon

Dragon

    All Around Computer Nut

  • Retired Staff
  • 2,678 posts
hiya tankz,

First off you should have started a seperate topic for your questions as it sends the original off-topic.

as for your question, make it a gif, png, or jpg when you save it, it compresses the file based on the format you make.
merging the layers will make it smaller and load faster. It would be a good idea to save a copy of the image without merging the layers too, that way you can edit it later if you want to.
  • 0

#9
knexor2

knexor2

    Member

  • Member
  • PipPip
  • 28 posts

Is it possible to have a background that 'fades' across the page (i.e. starts as light green on left side and changes - gradually - to very dark green on right side)? :whistling: :blink:

If possible, do I need special software? (Don't see how it can be done with 'straight' HTML.)


I think this could possibly be done with HTML and CSS, but the method would hardly be supported. It would require the use of the CSS "filter:alph", which I think "filter" is IE-only (my FireFox's JavaScript console marks it as an unknown property) and spotty even there, and the CSS "position:fixed", which I haven't been able to get to work anywhere (haven't tried in a while, though).

Your best bet is to make a 1px-high image that fades as you wanted, and use the following code snippet:

<style type="text/css">
body {
	background-color:#00ff00;
	background-image:url(bgpic.wev);
	background-repeat:repeat-y;
	background-position:right;
}
</style>

This would make the majority of the screen lime-green.

To make the majority of the screen dark green, change color to "#008000" and position to "left"

Hope this helps.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP