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: 29 28 27 26 25 24 23 22 21 20 19 … 1 » Show All
There are 286 comments (+Add)
Pages: 29 28 27 26 25 24 23 22 21 20 19 … 1 » Show All
Post Your Comments
Loading ...
286 Bedirhan http://www.bedirhansolo.com
June 30th, 2009 at 12:23 am
I cannot thank you enough for this post. The display: table and width: 100% were the last two pieces of the puzzle that I could not figure out.
Thank you so much!
285 Stijn Jasper - Moviecrew.nl http://www.Moviecrew.nl
June 27th, 2009 at 4:34 pm
Great website, and the post about the background was really helpful! Thanks!
284 Pete
June 27th, 2009 at 3:10 am
Thanks for this!
What’s the license on the demos - e.g. this background image:
http://www.webdesignerwall.com/demo/large-background/images/cork-bg.png
283 Gianfranco http://www.stylozero.com
June 25th, 2009 at 4:39 am
I’ll give it a try and test it for browser compatibility. Sounds as a great fix, and a CSS trick that goes in the book.
282 Gabriel http://www.georgetownphantoms.com
June 24th, 2009 at 3:19 pm
Awesome! So it looks like the best solution is to apply a background color to HTML, and a min-width of your content width to BODY, and a min-height of your background to BODY. So for example, on a site with a 1400×600px background image and a 800px-wide content wrapper:
html{background: #000;}body{min-width: 800px; min-height: 600px;}
Thanks to everyone here who helped develop this method!
281 Kevin Oh! http://www.kevinohara.com
June 23rd, 2009 at 2:13 pm
I had the same problem with the sticky footer/large BG situation. The min-width on body worked perf.
body {
min-width: (size of wrapper)px;
}
Thanks Ricardo,
~Oh!
280 Ricardo http://www.caneidia.com
June 22nd, 2009 at 11:31 am
Agree with Gianfranco, if you add any background to HTML and then min-width to the BODY (width of your wrapper), then you can get rid of {width: 100%; display: table}.
And the good new is that it even work on IE6 (which doesn’t support min-width) because for strange reasons in IE6 the background is always centered without using workarounds.
279 Gianfranco http://www.stylozero.com
June 22nd, 2009 at 2:32 am
Good to know there is somebody who test it out.
Keep going, Gabriel.
I don’t have time to test it right know by later this evening I will and will tell post my feedback and further test fot sticky footer + background to work toghether (this must be possible).
278 Gabriel http://www.georgetownphantoms.com
June 21st, 2009 at 12:47 am
OK, so my solution isn’t perfect:
1. If the browser is narrower than the content, the background shifts. This doesn’t bother me, at least it stays still when the browser is narrower than the background image (which was my biggest problem with IE). The display:table method more strictly controls this behavior, but again, at the cost of the sticky footer.
2. If the browser is shorter than the background image, the page is made as high as the bg image, and the footer rests inside that height (assuming your content is short enough not to push it down). So basically if you have a tiny browser displaying a super-short page with a tall background image and a short footer, it looks like there is a randomly large space between the content and the footer. This doesn’t bother me either, it will pretty much never happen on my site with my userbase.
I hope my method is helpful to some of you regardless.
277 Gabriel http://www.georgetownphantoms.com
June 20th, 2009 at 2:21 pm
YES!! I think I’ve got the holy grail of large CSS background + sticky footer! First of all, I am using the sticky footer code from cssstickyfooter.com. Then I use the centered CSS background as described here. Now here’s the magic: instead of BODY {display:table and width:100%}, I give HTML a background color and give BODY {min-height: ___px} (the height of my background image).
Boom: background centers perfectly in everything, sticky footer in everything, background doesn’t get cut off when content extends below viewport, everything is magical.