Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.
Common Mistake: Background Gets Cropped (see demo)
Take a look at the demo file, it looks fine under 1280px. But if you have a high resolution display, you will see the background gets cut off on the sides.
Example #1: Single Image (see demo)
A quick solution to fix the problem mentioned earlier: make the edge of the image the same color as the BODY background color. Here, I'm going to use Web Designer Wall as an example. Take a look at the image below and notice the edge is a solid color?
CSS Part
The CSS part is very simple. Specify the background image (position it center, top) for the BODY element.
Here is the CSS code:
body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
width: 100%;
display: table;
}
Notice there are two extra lines in the BODY selector. That is to prevent the background image from shifting when you resize the browser smaller than the content width (it happens in Firefox).
Example #2: Double Images (see demo)
For this example, I'm going to use the job board design, Design Jobs on the Wall. I have a cork board pattern repeating in the BODY tag and a wrapper background in the center.
The trick here is to export the GIF matte with a brown color that is similar to the cork board pattern.
Example #3: Sky Background (see demo)
In this example, I have a 1px gradient that is repeated horizontally for the BODY tag. Then I attached a cloud background in the center of the #wrapper tag.
Update: Sky Background Using HTML Selector (see demo)
Thanks to the comments from the readers. Below is an example of the sky background using HTML selector to display the gradient background, so the #wrapper DIV tag is not required. It is a much more cleaner approach.
Download the demo zip now and don't forget to check out the Large Background Websites.
Credits: thanks to Alex from markup4u.com for the {width: 100%; display: table} CSS trick.
Pure awesomeness :)
@Markup4U
I was using display:table for backgrounds on header and footer, and sometimes, randomly, the footer and header didn’t got aligned. Due to the nature of the footer bg, I was able to supress the display:table from it and then it matched the header bg position.
Now, I’ve a question, I’ve come to a work where a light content area is placed against a large dark background that has the area for the content with a light texture and, in FF3, the content area and background align according to the resize of the window. This bug is reviewed here http://www.positioniseverything.net/bg-centering.html
however, I can’t use any of the solutions stated in the article.
Do you know of any other way? thanks
Brilliant work yet again, keep them coming :-D
Thanks, this is really helpful.
Thanks, but sometimes “display:table” not work properly in IE6.
very cool! thanks, always wanted to know how web designer wall pulled that off.
Very impressive again another tutorial that is quite simple and will help a lot of people. Keep on the good work
I have been using these techniques in several sites I have developed. I did not know, this trick:
width: 100%;
display: table;
Thanks for that :)
@Skracanie linków
Not entirely. The Background is flash, but all content is displayed using HTML / CSS. However, after delving into the source code it seems that the background is loaded at 100% width and 100% height via Javascript. It uses the SWFObject script, http://blog.deconcept.com/swfobject/, and a small Javascript function called in the header. I’m wondering if this is all that is necessary, or we need to do some extra stuff in the actual Flash file.
@flash designer
IE6 and IE7 do not fully / properly support ‘display:table’. Not sure if IE8 will. I think that IE8 beta is supposed to, but MS may drop support.
How big or what size should a background image be? So when I compress in Photoshop how big should the file be?
thanks
@Daxion
Could you please send us a link to the test site or the local version of site with the issue mentioned? You are welcome to use our contact form or send email directly to dev at markup4u dot com
Thanks, this is really helpful.
I think i will use it in my next project.
my blog
thanks for the info..really appreciate it..well done!
Very useful! I’m getting ready to use a large background on one of my sites, and the double space tip was very helpful. Thanks!
Very useful article, thankyou very much!!!
Very nice tutorial. Thank you for sharing!
Thanks for showing us all the possible methods :) My own blog is much simpler and basic, but maybe in the future I will use this technique for other sites. I’ve searched before for tutorials on how to achieve it, but this is a very complete one. In this tut you can figure out your self what’s the best way for you.
I like the Body background and the Wrapper background approach. Might make the page lite-weight than the other big image alternatives.
That’s great! But you don’t tell us how make backgraunds such as in your collection of Large Background Websites!
How creates a large background site using big pnoto. For example
http://www.geo-alliance.com.ua for difference resolutiion of display!
execellent tutorial :) keep it coming!