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.

495 Comments

1 23 24 25
  1. Artur Sites
    May 11, 2012 @ 2:01 am

    This solution aways work for me. Some times have problem with IE 6. But guys not use this anymore

    Reply

  2. jamestulum
    Jun 28, 2012 @ 1:19 am

    welcome my page

    Reply

  3. Susan Fisher
    Jul 12, 2012 @ 12:40 pm

    Thanks for the post, it gave me some ideas for a site I am working on. By the way, I love the artwork on this page and on the example 1. Really beautiful.

    Reply

  4. إبراهيم الأمير
    Jul 30, 2012 @ 3:55 am

    أنا مصمم مواقع عايز خلفيات لموقع شركة تأمين ممكن لو سمحت

    Reply

  5. pa background check
    Jul 31, 2012 @ 3:45 am

    hey there and thank yοu for your infoгmatіon – I’ve certainly picked up something new from right here. I did however expertise a few technical points using this web site, as I experienced to reload the website a lot of times previous to I could get it to load correctly. I had been wondering if your web host is OK? Not that I’m сomplаіning, but sluggiѕh loаdіng іnstanceѕ tіmeѕ will often аffect your placеment in gοοgle and can damage yоur quаlity ѕcore if aԁs аnd
    marκetіng with Αԁworԁѕ.
    Well I’m adding this RSS to my email and could look out for a lot more of your respective exciting content. Ensure that you update this again very soon.

    Reply

  6. Asad
    Aug 27, 2012 @ 3:31 am

    very helpful post, i have fixed my background image problem in my site

    Reply

  7. AmirHossein
    Aug 31, 2012 @ 1:56 pm

    Wow , this solutions was great… Thanks

    Reply

  8. Alquiler yates Ibiza
    Aug 31, 2012 @ 4:20 pm

    I did however expertise a few technical points using this web site, as I experienced to reload the website a lot of times previous to I could get it to load correctly. I had been wondering if your web host is OK? Not that I’m сomplаіning, but sluggiѕh loаdіng іnstanceѕ tіmeѕ will often аffect your placеment in gοοgle and can damage yоur quаlity ѕcore if aԁs аnd
    marκetіng with Αԁworԁѕ.
    Well I’m adding this RSS to my email and could look out for a lot more of your respective exciting content. Ensure that you update this again very soon.

    Reply

  9. KHOKON
    Sep 10, 2012 @ 1:44 pm

    Thanks for clearing my concept of Large image. I am searching such kind of tutorial for long time.

    Reply

  10. renato
    Sep 28, 2012 @ 7:41 pm

    Thank you very much.

    Reply

  11. John
    Nov 28, 2012 @ 1:11 am

    Dude, you are a hero. Example #3 is refined, exquisite and just plain works. Thank you.

    Reply

  12. sequentially
    Jun 1, 2013 @ 2:28 am

    Hey there! Do you use Twitter? I’d like to follow you if that would be okay. I’m
    absolutely enjoying your blog and look forward to new posts.

    Reply

  13. Magson Fernandes
    Jun 4, 2013 @ 12:03 pm

    Your blog contains excellent ideas and tips to make website user friendly. I have used user tips in designing my college project website at : http://www.comingsoonlive.com

    Thanks ! Keep adding new tips and ideas i love it.

    Reply

1 23 24 25

Leave a Reply