Oct 20
How to: CSS Large Background
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.
Free Conference Pass to FOWD Complete WordPress Theme Guide
Comments
Pages: 34 33 32 31 30 29 28 27 26 25 24 … 1 » Show All
There are 338 comments (+Add)
Pages: 34 33 32 31 30 29 28 27 26 25 24 … 1 » Show All
Loading ...
338 luke florio
February 1st, 2010 at 4:03 am
Thanks very much for the excellent advice and clarity of presentation.
337 dak Sullivan
January 22nd, 2010 at 8:16 am
Thank you, this is very helpful.
336 pRoy
January 17th, 2010 at 2:34 pm
Wicked, Thanks!
335 Taryn http://www.gxi.co.za
January 10th, 2010 at 3:16 pm
Thanks so much for the beautiful backgrounds!
334 Francesco
January 4th, 2010 at 12:29 pm
Great tutorial! Thanks! Just one doubt about the ones with “Photographic Styles”…
333 Najibah
December 31st, 2009 at 12:46 am
Hi! I have been the fan of your site since the 1st time I arrived here. I’m totally new to web design, but jumping onto the bandwagon with much vigour, thanks to your site and your efforts. While trying to CSS a large background of my current trial project, I found out that if I use CSS example from “Sky Background Using HTML Selector”, IE 6 will not read it correctly. The background image selected by HTML element would be missing. Is there anyway to go around this problem, if I would like to stick to using HTML selector? Maybe anyone here can help? Thank you in advance.
332 Chris Clark
December 30th, 2009 at 12:49 pm
You have the prettiest website I have ever seen.
331 sirus
December 3rd, 2009 at 8:56 am
Thank you SO much for this great tutorial!!!! I have been searching everywhere on how to do this and your page clearly shows how to do with the CSS… Again, many, many thanks!!!!!!
330 Anwar
December 1st, 2009 at 1:39 am
Its Great, Please also describe about footer image like in this page. i.e. http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
It should keep hold with bottom even no text in a page.
Thanks in advance.
329 charles http://www.yavendi.com
November 16th, 2009 at 7:26 pm
muy bien saludos from colombia