Oct 20

Tagged in: Comments:Add

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.

background cuts off

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?

WDW background image

CSS Part

The CSS part is very simple. Specify the background image (position it center, top) for the BODY element.

CSS overview

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).

Firefox bug

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.

cork board

The trick here is to export the GIF matte with a brown color that is similar to the cork board pattern.

cork board overlay background

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.

sky background

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.

sky background 2

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.

Delicious Stumbleupon Digg

Free Conference Pass to FOWD Complete WordPress Theme Guide

Comments

Pages: 39 38 37 36 35 34 33 32 31 30 291 » Show All

There are 383 comments (+Add)

  • 383 GaudStudio http://www.gaudstudio.com

    Thank you very much.
    Really Thank to U.
    From gaudstudio.com
    Thailand

  • 382 Cáp quang NetPUMA http://cqnetpuma.webs.com

    Hi

  • 381 Web Design Company Dubai http://www.gulfwebstudio.com

    Nice spoon feediing about using css backgroud.. hope lot of visitors will do and work out it in their works. thanks for sharing

  • 380 ary

    Great Site, thank’s for the tutorials.

  • 379 Martin Young http://www.consciousnessdesigns.com

    You’ve no idea how long I looked round for a solution to the issue of the background shifting when the browser window was reduced - and I thought it was going to be something really complex to sort. Great tip, huge thanks!

  • 378 Ranjitsinh Bhalgariya http://ranjitsinh.wordpress.com

    Superb, Thanks very much for good info………

  • 377 Alexander http://www.torontowebdesignexperts.ca

    Hello,

    Great article.

    I have tried the first example but the background image shifts when the window is smaller than the centered content.

    Are you able to provide a correction to this example ?

    Thank you for your help,

    Alexander

  • 376 Fred

    I’ve been trying to make a background with 100% height for at least 2 hours with no luck and finally this makes it work! thank you so much! I didn’t know that “display: table” option.

    Thank you!
    Fred

  • 375 Amida

    Well I was looking for a solution like that, but I got disappointed, the {display:table, width:100%} thing, really only works in chrome/safari. In firefox it goes crazy if you resize quickly the window and in Internet Explorer, the background simply continues to scroll. :(

    Thx for the article anyway !

  • 374 Richy Rich

    Wow - you got loads of spam comments.

Pages: 39 38 37 36 35 34 33 32 31 30 291 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

Back to top