Grow your CSS skills. Land your dream job.

Backgroung color fade

  • # February 12, 2011 at 5:00 pm

    Hi, I’m about to make a simple site with one only page (for now), I already know HTML, and some PHP and javascript but I don’t know anything about CSS. So I would like to know how to make a fading effect on my sites background (Bgcolor)
    Here is a simple explanation, the bgcolor starts yellow and then fades to green and then to yellow..etc the fading effect starts with no even (no buttons). I saw this effect somewhere, I don’t remember the site name at the moment.
    Thank you.
    Mêtah

    # February 12, 2011 at 6:09 pm

    You meen a css3 gradient ?
    http://css-tricks.com/css3-gradients/

    There are some generators out there:
    http://gradients.glrzad.com/

    # February 12, 2011 at 6:19 pm

    Another way it is done is with an image. Usually an image is 1px wide and then however tall you want the gradient to run down the page. The css would specify repeating the 1px wide image horizontally over the page so it will show in the browser as covering the whole area.

    body {
    background: #ffffff url(“images/image.jpg”) repeat-x;
    }

    Or you could make a 1px high image and repeat it vertically. Which would make a horizontal gradient.

    The gradient image itself is often made in image editors like photoshop or gimp or . There is a css only solution which Sirlon points out in his links but you’ll probably want to create a fallback image as well for older browsers so a gradient effect is still achieved. Also the edge of your gradient could be a solid color which you could match to a solid background if you want it to fade and still look nice (especially if the user has a high resolution monitor).

    http://reference.sitepoint.com/css/background-repeat

    # February 13, 2011 at 2:38 am

    Hi Sirlon and Rcobb3 and thank you, I don’t mean a CSS gradient.
    I wont use images for the background. I’ll try to explain my problem one more time, I need to make the background ‘color’ (BGcolor) fade from one color to another (exemple: starts as #ffffff then after some seconds fade to #000000, I believe it needs a js function but not all the web browsers will be able to view it. The background color change from one color to another..
    I’m sorry for my bad english, I hope you understand what I mean :)
    Thank you again.

    # February 3, 2012 at 1:34 pm

    Okay so if I am understanding you correctly you want your page to shift from one color to another? Well if you want the color to continually change you can use a 1px wide gif image. Use a image editor and make the variation of colors you want during the shift and then use http://picasion.com/ to make it into a gif. Then just do like rcobb3 said.

    Just to clarify what I mean by “Use a image editor and make the variation of colors you want during the shift and then use http://picasion.com/ .”
    picasion.com compiles multiple images into a gif image. So make multiple images of the colors you want for the fade to and from the final color. Where ever you put this image the color will continually shift.

    gif animator
    Gif animator

    Here is a code generated by picasion, I used 5 jpg images to generate the affect. You can also just save any image you generate to you computer. There is a max number of images that you can use. Picasion has a 10 image limit. I don’t have Photoshop or anything so one of the image creators may have a similar function.

    # February 3, 2012 at 5:24 pm

    Also you might want to check out CSS3 they have functions like what you want here is a link too a good site http://www.w3schools.com/css3/css3_animations.asp
    I had just read this myself.

    # February 3, 2012 at 7:09 pm

    You can do it with CSS keyframes, but I would reconsider. As a visitor, if the background kept switching colours, I would leave the site.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".