Tuesday, December 18, 2012

How to: CSS large background

CSS large background
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

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 large background

CSS Part

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

CSS large background

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

CSS large background

View Demo

Example #2: Double Images

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.

CSS large background

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

CSS large background

View Demo

Example #3: Sky Background Using HTML Selector

Below is an example of the sky background using HTML selector to display the gradient background, so the #wrapper DIV tag is not required.

CSS large background

View Demo