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: 22 21 20 19 18 17 16 15 14 13 12 … 1 » Show All
There are 211 comments (+Add)
Pages: 22 21 20 19 18 17 16 15 14 13 12 … 1 » Show All
Post Your Comments
Advertise Here
Loading ...
211 Web Designer http://www.raycreationsindia.com/
December 31st, 2008 at 11:57 am
If the table is blank and you have a background displayed there it would not display in Mozilla and Netscape. You need to have some content there for the background to display.
210 Hedie
December 29th, 2008 at 2:00 pm
Is this happening for anyone else? the “display: table” prevents the background image from appearing on Firefox and Safari on the Mac (although I have to mention that I have not uploaded anything to the server, I am just previewing from my machine). thanks!
209 Yellow SEO http://www.yellowseo.com
December 28th, 2008 at 8:03 pm
Needed to skin a word press site in a flash and your tutorial came in very handy with a large custom background image.
Thanks M Kelly
208 sitender kumar
December 26th, 2008 at 1:26 am
Thanks for this, but this is very common guidline, we expect from you more advance techniques which is normaly not used by common designer or html coder. if you have some advance techniques of css & photoshop. please share with us
207 Yamen Elasadi http://loanmodificationmadesimple.com
December 25th, 2008 at 7:48 pm
I love you comment script. Where can I purchase its PHP code from?
Thank you
Yamen Elasadi
206 David
December 24th, 2008 at 12:03 pm
Great article. The only issue I have with this, and have had in the past, is similar to what Gary is experiencing. Unless you make the container larger than the BG image overlay container like you did in your html example, you get a one pixel shift in IE and safari when you resize.
I used firebug to tweak your demo code. When I reduce the size of the background container, to match the dimensions of the container that is tied in with your cloud background image, the same thing happens to your example.
Do you, or does anyone else know a fix to prevent this one pixel jog when matching wrapper / container widths exactly?
205 factotum218 http://designingcrap.com
December 21st, 2008 at 10:05 pm
Once again, a brilliant addition to the site.
Once again, exactly what I was looking for.
There was a theme on OSWD that uses this and I was interested in doing this as well with a design I have been playing around with. And sure enough, webdesignerwall has it in stock!
Click the ads people, this site deserves it!
204 Home Assembly Jobs http://www.assembly-jobs.com
December 21st, 2008 at 11:24 am
That was a nice post. I’m going to try designing my own large background theme though I suck CSS.
203 diseñoweb http://www.nexodigital.cl
December 18th, 2008 at 6:57 pm
thanxs for the manual, I´ll use it in my nex poject.
202 Great Web Design http://www.sosmedia.org
December 17th, 2008 at 5:44 pm
Great tutorial. My clients all want one! Thanks!