Adding Gradients to the Edges of your Background Images

You can see I’m quite enjoying making video posts – this is the second one in 4 hours!

This time we’re looking at how a gradient can be added to the edges of a background image so that it seamlessly fades into the background color of your HTML page.

Basically we will be turning the image below, and to the left, into the image on the right – apologies in advance for the long-winded video – I’m still getting the hang of talking while I’m working and sometimes it’s hard to remember what I want to say while I’m concentrating! Bear with me…

gradient-edges

And a big thanks to Matt for letting me play with his really nice pool table background image – you can see the background in action at Matt’s Pool and Snooker site – click here.

Get the Flash Player to see the wordTube Media Player.

I should also add that the software used for image editing in this video is Adobe Fireworks – You could use similar techniques to achieve the same effect in Photoshop, Gimp, etc.

3 Comments

 Add your comment
  1. You are doing fine with your videos… much, MUCH, better than I did with my first attempts.

    Actually – much better than my last attempts as well ; )

  2. Fading out an image in photoshop such that there are no edges to the images can be a repetitive pain with the feathering. Your alternative will be very helpful for certain applications where the background is a solid color. Thanks!!

  3. This is the easiest tutorial that I have found to get these results. I am in school to learn web design, so I am wondering about the size of this image you say we should use and it’s download time?
    I take loads of pics of my gardens. I want to use them as background images faded into a background color of my website, so I have been looking for an easy way to get this kind of result. I love the sites where they have a large flower and fade it into the background color of the page. I have found this mainly at my website. I am real interested in learning this. Thank you for your time and tutorial!

    Cat

Leave a Comment

Your email address will not be published.