wabzi wabzi - 7 months ago 25
CSS Question

How do I create two different backgrounds on the same page?

Can anyone tell me how to create the background as shown on this website:

Also, how can I get that curved separation? I realize they're two divs, but how was the border curved?


the curved separation comes from the fact that the header image has purple in the bottom to create the curve. the actual file can be seen here: http://www.zucoffee.com/wp-content/themes/zu-coffee/images/header-bg.gif

This (to my knowledge) is fairly common practice to have one background that serves the entire page, and have another separate background on top of that which serves just the header and/or footer. depending on the style of the site, this may include interesting separations, and I have also seen .pngs used to get the header/footer design to 'fade' into the main background.

There are obviously many different ways that you can do this, and I'm sure someone will want to add on to my answer, but the way your example site chose was to use the background property on their body and header tags to add their images. a snippet from their css file below:

body { 
  background:#4b1259 url(images/tile-bg.gif) repeat-x;
  font:16px/22px Georgia;
.header-bg { //this is where i found them adding the header image.
  background:url(images/header-bg.gif) no-repeat center top;