FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Fading background





-TomJ-
I would like to create a fading background on my web pages: dark grey on the left, fading away towards white at approx. 30% of the page.

I know I can do it by using a fading image as background image on the body tag style, but I woudl like to know if it is possible using css only.

I have found a site where a topdown fade is made ( have a look), but I can't get it turned around ...
ml
-TomJ- wrote:
I know I can do it by using a fading image as background image on the body tag style, but I woudl like to know if it is possible using css only.


it would be possible by css but the code would be dirty and very long.
with pictures its easier !
SamiTheBerber
The idea is cie but that is not so good. That can't be with percents, because program creates lines with options. It contains only one size :S
dkill001
i am not sure what type of fade you are after, horizontal , vertical or diagonal fade...i have created horizontal fades using css, it is quite simple - it just repeats the faded background over & over ---- see my SITE CONTENTS menu on the right of my page http://dmk66.frih.net/ ...is this what you are after?
-TomJ-
dkill001 wrote:
i am not sure what type of fade you are after, horizontal , vertical or diagonal fade...i have created horizontal fades using css, it is quite simple - it just repeats the faded background over & over ---- see my SITE CONTENTS menu on the right of my page http://dmk66.frih.net/ ...is this what you are after?


I am looking for something in that direction. I am experimenting - using an image sofar - on my site-to-be, but I want something like
from left #636363 to right #ffffff.
Basically I want to create it as a class that I can connect to the <BODY> tag, so it will be visible on the entire page. If I manage to get the
grey version working, I intend to have a similar class (for instance in a #D20000 variety) that I could use in a different section of the site.
dkill001
here is an excerpt of code from my css:
#menusection {
position: absolute;
top: 10px;
right: 5px;
height: auto;
width: 150px;
font-size: 12px;
text-decoration: none;
font-family: arial, verdana, sans-serif;
color: #000000;
background-color: #0000FF;
/* change opacity */
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
background: url('../menu/navbar/themes/winxp/sec-title.gif') 50% 50%;
}
the red highlighted portion links the image with div id="menusection"
the image can be a mere 1px tall since it will repeat over and over. hope this helps.
Related topics
Using a pic as the main background of your page?
background tiles for sites
I need a background for my site...
Cloudy Background
background music
for your comments
Basic Tags - Add a background image
Basic Tags - Add a background image
SMU: Jasna's Graphics and Layouts Shop [Closed]
xbox 360 background
Help met HTML Background [opgelost]
Can l set it so that a background has a certain opacity?
background change on windows explorer
Graphic + Web Design
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.