30 Free Fading Background Images

February 1, 2007 | Posted in Freebies |

This is the first set and consists of a color fading to white. All fading background images in this set fade into white, so for the best results, you should set the CSS background color of your “body” to #FFFFFF.

These fading background images are intended to be used with your CSS in a repeat-x fashion. All files are in PNG format and are on average 4K in file size. This is only the first set. More to come. The next set will most likely be on black, but if you leave feedback, I will try to include exceptions. Background color is the biggest question. What is the most popular background color besides black and white? You, tell me.

Download All 30 in a Zip File (32K)

I hope these fading backgrounds make your life a “bitt” easier. :)

The internet services provider offering the services of broadband or dial up internet through wireless communications is called a wireless isp. The educational sites such as the site of apple certification along leading shopping sites do need business web hosting package along broadband internet link in order to be browsed without difficulty. People can buy the latest models of canon cameras online along the affordable camera lenses through leading shopping sites. While now a days one can pay online for the mobile phones plans and save its time as well.

This entry was posted on Thursday, February 1st, 2007 at 7:52 pm and is filed under Freebies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

60 Responses to “30 Free Fading Background Images”

Jits Feb 2, 07 at 5:08 am

*and the crowd goes wild*

:)
Jits Feb 2, 07 at 6:28 pm

PS: Any chance you could show us how to incorporate one of your rounded corners on one of these background images (with full CSS markup)? :D
Brandon Hopkins Feb 8, 07 at 3:28 pm

Awesome…I’ll be using one of these at my new site http://www.afterhimmedia.com

Thanks!
Stefan Waidele Feb 15, 07 at 2:14 am

Why don’t you “fade to transparent”,
and all backgrounds are taken care of?
damo Feb 20, 07 at 3:53 pm

some of the stuff i’ve seen on your site is amazing. amazing not because fo the work but because you give it away. a true gent.
nagash Mar 20, 07 at 2:40 pm

I dont get it…
that’s just gradients, right?
squiddle Apr 4, 07 at 8:32 am

1. this are just gradients, how come you get attention at all? i really do not get it. maybe i should do a blog and bring breaking news like the earth is not flat in public opinion.
2. what a bandwith waste. 1px width is enough for this.
3. why not making a small tutorial or tool how you created those for all the webdesigners-with-no-clue-at-all

content drives the web not neglectable stuff like this.
buy something nice from the ad-revenue for this article
@Stefan Waidele fading to transparent maybe more useful but without some extratricks the ie will luckily throw is intesticles in the face of your visitors. And nobody wants that.
ejboy Apr 4, 07 at 11:48 am

Please, make a free blank.gif !
Mike Lane Apr 4, 07 at 8:50 pm

Nice. Buuuuuuut…. You either need to use something else besides png or you need to look into gammaslamma. The problem with Adobe software is that it will apply the png gamma info incorrectly. Firefox ignores the gamma information; however, Safari and (of all things) Internet Explorer do not. That means that your pngs will be slightly lighter in Safari and IE6 than they are in Firefox. Apps like gammaslamma will remove the gamma chunk from the png file. That said, the gradient you used certainly does not have to be a png. You could avoid the whole mess and just use a jpg (or gif depending on the color depth requirements).

The biggest problem isn’t that pngs appear differently from browser to browser, it is that pngs are different colors than colors used in HTML or CSS on a page. Take a look here to see what I mean.

Here’s a link to a gallery where you can see the difference. In both images firefox is on the left, on the right is Safari. The top of the darkest gradient in firefox is #C5C5C5 and in Safari it is #CBCBCB. It’s a slight difference but it is noticeable. If, for instance, you’ve got a box that is adjacent to a png that uses HTML colors, you will definitely notice a difference in IE6 and Safari.

PNG is nearly the perfect file format. Maybe someday it will actually be perfect. I hear that CS3 (at least photoshop, not sure about illustrator) will not have the same png gamma problem. I can’t wait to see if that’s true!

All that said I like the gradients and my vote is 1) to use jpgs, and 2) to use base colors #444, #666, #888, #aaa, and #ccc.
BittBox Apr 4, 07 at 9:27 pm

I apologize If I’ve done wrong here, but this was one of my first posts. My expertise is in Illustrator/Photoshop/Flash.

I appreciate all your comments, and Invite you to view my freebies archive. (mostly Vector Files)

http://www.bittbox.com/category/freebies

~BittBox
links for 2007-04-05 « My Weblog Apr 4, 07 at 9:37 pm

[...] 30 Free Fading Background Images | BittBox (tags: css design) [...]
Best of March 2007 | Smashing Magazine Apr 11, 07 at 9:06 am

[...] 30 Free Fading Background Images This is the first set and consists of a color fading to white. All fading background images in this set fade into white, so for the best results, you should set the CSS background color of your ?body? to #FFFFFF. These fading background images are intended to be used with your CSS in a repeat-x fashion. All files are in PNG format and are on average 4K in file size. [...]
???????? ????????? Apr 11, 07 at 2:41 pm

Nice
webmaster Apr 15, 07 at 8:54 pm

Thanks from http://www.noexcusebudget.com
NewbieWebDev Apr 24, 07 at 7:13 am

Hey pros, why would you care if this was available or not? I believe it’s intended for us newbies to get our feet wet to start making some nice pages … at no cost. You can always build a better mousetrap, but at least this is a nice way to start.

And yes, content is the most important thing….. But try dressing up a swan with the feathers of a pigeon.

Thx BittBox.
Tony Apr 26, 07 at 12:58 pm

Come on, folks…why are you complaining? The images are free, the article is free, the feed is free. If you don’t like it, feel free to not like it somewhere else.

>> squidle wrote
>> 2. what a bandwith waste. 1px width is enough for this.

What squidle doesn’t seem to get is that some browsers have trouble rendering a full-screen 1px background that many times without chocking. It’s really better to have something that’s wider (like 25 or 50 px) than 1px.

Content really IS king. I wonder why squidle didn’t post a URL for his/her own content-rich website?
Amber Apr 26, 07 at 9:25 pm

Thank you!
tobto May 4, 07 at 7:17 am

nice.. are there anybody who use Photoshop?
ha-ha
mimmo May 9, 07 at 10:24 am

Yeah, thank you!

About rounded corners, is load rounded images into table cells (or divs) the only way to obtain the wanted result?
eburhan.com » Haz?r Web 2.0 Tasar?m Ara?lar? Jun 1, 07 at 12:44 am

[...] ki yatay ?eritlere g?re g?z? daha az yoran renk ge?i?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
» Haz?r Web 2.0 Tasar?m Ara?lar??a?an » Blog Archive Jun 5, 07 at 2:48 am

[...] ki yatay ?eritlere g?re g?z? daha az yoran renk ge?i?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
Haz?r Web 2.0 Tasar?m Ara?lar? « Tasar?m Manya?? Jun 6, 07 at 8:03 am

[...] ki yatay ?eritlere g?re g?z? daha az yoran renk ge?i?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
Haz?r Web 2.0 Tasar?m Ara?lar? Jun 8, 07 at 6:43 am

[...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
piracy! Jun 10, 07 at 9:32 am

This site is amazing! You do such a great job on everything!
Laydo.net Webmaster Blog » Blog Archive » Web 2.0 i?in ?e?itli ara?lar ve ac?klamalar Jun 18, 07 at 12:31 am

[...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
Creating a Faded Web Page Background Image » Ja Kel Daily Dot Com » Blog Archive Jun 24, 07 at 9:55 am

[...] The process is really simple you just need the right code and then the image.? To create the image you will need Adobe Photoshop.? I know that not everyone will have this program so you can find 30 free images here. [...]
Flux Jul 22, 07 at 2:55 am

Thank you! This is help my for make design in my blog
Laydo.net Webmaster Blog » Blog Archive » Haz?r Web 2.0 Araçlar? Jul 22, 07 at 10:12 pm

[...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
muzaffer Aug 10, 07 at 1:12 am

“
Barbara Aug 15, 07 at 9:59 am

How lazy can someone be??? thanx!!!
Anthony Sep 28, 07 at 12:56 pm

Thank you so much! I was about to hire someone to do it for me cause I had no idea how those MSN guys did it. Now I can do it myself. Thanks again and God bless!
Darlanne Oct 10, 07 at 5:49 pm

Awesome freebies, thanks! :)
David Hernandez Oct 23, 07 at 12:49 am

Wonderful. I used it on my engraved gift sites http://www.cellphoneflasks.com and http://www.personalizedegifts.com
Wikan Dec 16, 07 at 6:33 pm

Great files, i used it on my technology news site http://www.beritanet.com. It was simply makes my life easier
dizin Dec 25, 07 at 9:16 am

very nice,thanks!
Web 2.0 Tasar?m Araçlar? - Kisiselsayfam.com Dec 29, 07 at 7:24 am

[...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]
Haz?r Web 2.0 Tasar?m Araçlar? | ManyakHost // Tasar?m Jan 1, 08 at 1:15 pm

[...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
:) Jan 5, 08 at 10:28 pm

Nice, I like them all.. :)

I think the next popular colour besides the white and black is blue?

Thanks again for those backgrounds..
Webmaster Rehberi » Blog Ar?ivi » Web 2.0 Tasar?m Araçlar? Jan 29, 08 at 9:44 am

[...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]
Teknoloji Haberleri,Cep Telefon,Donan?m,Bilgisayar,Bilim » Blog Ar?ivi » Web 2.0 Tasar?m Araçlar? Feb 3, 08 at 3:12 pm

[...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]
Arkakapak.net / S?n?f Dizisi » Haz?r Web 2.0 Tasar?m Araçlar? Feb 4, 08 at 4:58 am

[...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
El ??leri Feb 14, 08 at 3:29 am

Thanks A lot
good job :)
arizateam Feb 19, 08 at 6:46 am

i think use this project on this site:
http://www.arizateam.com
Web Tasar?m Hakk?nda Her?ey…. » Blog Archive » Web 2.0 Tasar?m Araçlar? Mar 8, 08 at 6:41 am

[...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]
Haz?r Web 2.0 Tasar?m Araçlar? | Mar 16, 08 at 8:02 am

[...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
Web 2.0 Tasar?m Araçlar? | Gelengeliyo.Com Mar 17, 08 at 7:05 am

[...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]
Haz?r Web 2.0 Tasar?m Araçlar? - Programc?n?n günlü?ü! Mar 23, 08 at 3:11 pm

[...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]
Web 2.0 Araçlar? « Fikir-Siz’in Web Günlü?ü Apr 25, 08 at 2:26 pm

[...] Free Fading Background Images [...]
Hassan May 24, 08 at 11:32 am

Thanks for this , but i want to use the Vista Aurora Fading Theme.
gevv May 27, 08 at 7:29 am

Thanks A lot
Travesti May 31, 08 at 4:42 pm

http://www.travestiler.biz Thanks
Scott Jul 23, 08 at 10:13 pm

Thant’s exactly what I needed! Thanks!
umran Jul 28, 08 at 9:03 am

Thanks.. WHY WHY WHY!!! Why dont speak english :((
Web 2.0 Tasar?m Ara?lar? - BilgiYazar & Bilgi Yazar?z Aug 2, 08 at 4:17 pm

[...] E?er ki yatay ?eritlere g?re g?z? daha az yoran renk ge?i?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak k??eli kutular Web 2.0 ile birlikte k??eleri yuvarlat?lm?? [...]
Lorraine Aug 5, 08 at 7:05 pm

Thank you so much, you’re very generous and thoughtful
Ansiklopedik.Net » Blog Archive » Web 2.0 Tasar?m Araçlar? Aug 7, 08 at 10:33 pm

[...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]
virtue Sep 28, 08 at 4:00 pm

Dude you rock, thanks so much.

Don’t sweat the haters. They have too much time on their hands.

Get a hobby.
No Xplode Reviews Oct 27, 08 at 4:19 am

I think either that PNG with alpha opacity is not a wise thing, you will need pngfix in IE
Flying Cart - The Blog :: Backgrounds - I love them Oct 30, 08 at 8:53 am

[...] Fading Background Images [...]
Berita Nov 4, 08 at 3:42 am

Thanks! You are generous to share these cool backgrounds graphic . I use It on my new site http://www.berita.me