CSS Two-Piece Background

Top Background For Mama Mama Honey

During a recent project I designed a background consisting of two images. One image is a strip across the top of the site and the second image tiles in the lower portion of the site to form a two-tier background. In the interest of keeping my images as small as possible and since both parts have different colors and patterns I turned to CSS to place my images appropriately. As you can see lining up the overlap was important to to ensure the background looked right.

Bottom Background For Mama Mama Honey

The background image to be tiled throughout the site is attached to the body tag and assigned its correct starting position along the x and y axes. The Strip for the header area is placed in an absolutely positioned div (removing it from the page flow) and that div is set to the height of the background image and a width of 100%.

1
2
3
4
5
6
7
8
9
10
11

body {
  background-position: 0px 535px;
  background-image: url(images/bg_bot_default.gif);
}
.bgfolly {
  height:535px;
  width:100%;
  position: absolute;
  left:0px; top:0px;
  background-image:url(images/bg_top_default.gif);
}

further thoughts on this method

As you can see I wasn’t 100% certain this would work, hence the class name .bgfolly. Though this may seem an unnecessary method this site actually uses different seasonal and occasional backgrounds for the lower portion of the background. The background and certain aspects of the color scheme are controlled by the author via an admin panel.

If you’re looking closely you’ll notice the top strip has green and a shadow along its lower edge. I don’t like pure black shadows in many situations so I’ve actually created images for top and bottom for each seasonal background my client requested. However you could utilize some sweet .png 24 transparency on that top image and only need one top image with your multiple lower background images.

As a note, I originally tried those background images tied to the element in reverse and that did not work at all.

See the code in action @ Mama Mama Honey.