CSS Trick: Multiple backgrounds

I ran in to an interesting CSS issue this morning. I had 3 divs next to each other that I wanted to place a border between, but, I didn't want the border to be attached to the entire div. Instead, I wanted to have the border start approximately 50 pixel down from the top of the div. I quickly realized messing with the borders wasn't going to work and I was going to need to use a background image. However, simply adding a background resulted in the same issue. The background started at the top of the div. This left me with the same basic issue. The example image below has a red border around the left div for example purposes only.

As you can see, the dots start at the top of the div rather than next to the top edge of the graphic area.

I quick shout out to Twitter and a response from @norcross led me to slides from Sara Cannon‘s presentation at WordCamp Phoenix. Slide 20 being the important bit.

In CSS3, one of the cool new features is the ability to attach and stack multiple background images to a single element. To test it out, I created a second background image that was a simple rectangle of the same background color that was the height I wanted to block from the top of the image. I then attached both images to the div and, like magic, the problem was solved.

Here is the original syntax for the div:

#home-bottom {
	background: url('images/dots.png') repeat-y;
	width: 960px;
	margin: 0 auto 0;
	padding: 0;
	overflow: hidden;
	}

And here's the updated version calling in multiple backgrounds:

#home-bottom {
	background:
		url('images/cover-up.png') no-repeat,
		url('images/dots.png') repeat-y;
	width: 960px;
	margin: 0 auto 0;
	padding: 0;
	overflow: hidden;
	}

And this is the end result:

Looking at Sara's slide shows that there are a bunch of additional settings for placement and repeating that can be used. I didn't need them for my issue, but something to consider if you are having a similar issue.

Leave a Comment