CSS – How To Make a Large Centered Background

I was collaborating with a fellow designer the other day and was sent a website comp to take a look at. One of the first things I noticed was that I had a horizontal scrollbar show up in Firefox for no apparent reason. Let’s get one thing straight…I hate horizontal scrollbars! I don’t know why, but they make me angry. Anyways, it bugged me enough that I decided to look at his CSS and see what was wrong.

It turned out that he did, what I’m sure many people do, and defined a very wide “wrapper” div. I don’t remember the exact specs, but it was over 1000px wide. I work across multiple displays, once of which is a 30″ Apple Cinema display, but I don’t always have my browser windows all that wide. In this case it wasn’t as wide as the wrapper div, which caused the horizontal scroll bar. Not a problem, there is an easy fix.

Step 1 – Creating the image

If you’re still reading this tutorial then you’re probably wanting to create a fairly large background image. I’m starting with the document dimensions 1200×800 px. Below is a quick example of what I’m trying to accomplish. My background is the gigantic smiley face, and the slightly transparent rectangle represents the eventual content of my web page. (And yes I know that the page will cover up most of the smiley face).

Step 2 – The CSS

At 1200 pixels wide we would definitely cause a horizontal scrollbar demon to appear, so we need to do something tricky. The initial CSS for the background looks like this:

body {
	padding:0;
        margin:0;
	font:94.5% Helvetica,"Lucida Grande",Arial,Verdana,sans-serif;
	color:#fff;
	position:relative;
	background:#000 url(images/bodyBG.jpg) top center no-repeat;
}

The important line to notice from above is the background element. We are first setting the background matte color. In my example I have the smiley face matted against a black background. Thus, I am defining #000 as my background color. (For those of you that don’t know #000 is the short hand version of #000000. You can use them interchangeably)

After I define the background color I need to specify the image to lay on top. I.e. my smiley face. And this is where the trick comes in. Specify your image with:

url(images/bodyBG.jpg) top center no-repeat;

Aligning your image with “top center no-repeat” ensures that your image anchors itself to the top and is centered correctly. It is very important that you don’t specify a width in the body. Specifying a width will bring back your horizontal scroll bar.

Step 3 – Add the rest of your CSS

The rest of your page layout is up to you. In my above example I have a content area that is 800px wide and aligned to the middle of the page. You are free to do whatever you like. The best part about the whole thing…no horizontal scroll bar.