Website Background Images : Examples and Implementation
We all know how fast design industry is growing. Everyday we have new amazing stuff up on web such as online tools, free apps or unbelievable code development. Background images are one of the core features in web design that help make a website design visually interesting. Whether you are using a standard header background, a basic body background or a full body backgrounds there is great scope to come out with an amazing result.
Here are some great examples of background images used in Website Design. I hope it will be inspirational for all you designers out there.
1. Inner Metro Green
2. CCC Celt
3. Lebloe
4. CatNapGames
5. Colibri
6. Barro-Asturias
7. Two Rivers
8. Music Addict Designer
9. Toriseye.Quodis
10. Cie de Oorsprong
11. CSS Boost
12. Lucky Stars Tattoo
13. Russ kirby’s Portfolio
14. Charlie-X
15. Design Attik
16. Durrani Design
17. Mateus Neves
18. Australia’s FIFA World CUP Bid
19. Wild Marsh
20. Pictures N Sound
Implementation
Here’s a simple useful CSS code to add Image backgrounds to any website.
When using a background image, use an image that does not disturb the text. Its always advisable to call background image in your body tag. Using background-repeat property in below code to show image only once.
body
{
background-image:url(/Images/background.jpg);
background-repeat:no-repeat;
}
OR
body
{
background: url(/Images/background.jpg) center top no-repeat;
}
EXAMPLE
Also Read:
- 20 great tutorials on PSD to XHTML Conversion
- 45 awesome Photoshop website template/layout tutorials
August 23rd, 2009 at 6:45 pm
“Its always advisable to call background image in your body tag.”
Why do you say that? I might often happen that way, but I wouldn’t say that its “always advisable”.
In any case, its a nice list.
August 24th, 2009 at 6:20 am
Brilliant collection! makes me wanna change background on everything. Love Le Bloe. Thanks for sharing.
August 24th, 2009 at 9:28 pm
Every business anywhere across the globe has a wish of creating its own online presence. This is the only major reason why most of the organizations need help of the best website design provider services. They require these services to increase the number of visitors and then convert them into sales for their organization. Web design Boynton Beach FL provides the best of the services.
August 25th, 2009 at 1:49 am
Nice list, some really good looking backgrounds?
I would like to offer
http://macallanridge.com/
as an addition.
August 25th, 2009 at 7:51 am
Nice images!
August 26th, 2009 at 11:10 am
Nice list! What bout ProductiveDreams
August 26th, 2009 at 2:00 pm
Definitely bookmarked that for future use!
September 6th, 2009 at 2:01 am
Thanks for adding my web site
September 9th, 2009 at 9:16 am
I’m trying to add two background images to my website! i want a main background that repeats x and y and another smaller background at the top of my page that just repeats x! I know its possible! can anyone help me with the CCS or HTML I need to do this?
September 9th, 2009 at 9:18 am
I will only add that getting a set of tripod lights and a portable studio can make the difference in how things look. the on-camera flash leaves harsh shadows and makes image trimming a lot harder.
November 27th, 2009 at 2:47 am
Impressive collection…Each background will perfectly befit a particular kind of organization anywhere across the world….i think this is collection is mostly complete with a background for every kind of theme…A good post….
December 24th, 2009 at 6:44 am
wow
this is the greatest collection i had ever seen
February 2nd, 2010 at 2:18 am
Still cant believe they did this.
April 5th, 2010 at 8:31 pm
Well, nothing official about it. this can be easily achieved. in fact we did it here: http://www.activecomputech.com/portfolio.html
May 21st, 2010 at 4:02 pm
nice post, very helpful examples
December 28th, 2010 at 6:31 am
nice images
May 9th, 2011 at 3:02 am
Each background will perfectly befit a particular kind of organization anywhere across the world