How to use a background image in Webfolio WordPress theme without breaking CSS header?

Tags: php,html,css,wordpress,wordpress-theming

Problem :

I'm attempting to build a draft version of a website for the police service of a small nation using WordPress and the Webfolio Theme by Site5.com.

I've encountered a problem whereby if I select to use an image for the background of the theme using the theme's customization options/WordPress options, the black header that is repeated at the top at either side of the header does not display.

Now when I add the background image it looks like this

I tried reading the Site5 documentation but it doesn't have information that helps. Their support forums also seem quite inactive which is why I decided to ask here.

I've had a look at the CSS file and found the following:

 * { margin: 0; padding: 0; }
  body,html {
  font-weight:normal;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  color:#333;
  background:#EFEFEF url(library/images/bk_body.jpg) repeat-x;
  }

When I add the background image the CSS is still the same so I'm not sure how WordPress themes implement optional background images. I've attempted to fiddle with it to no success, but my knowledge of CSS is limited.

My question is, is it possible to use the background image while maintaining the top header bars as in the demo site? If so, could anyone guide me on the way how?

Edit: I've also tried using the built in Background Image options but all of them have the same result.

---

Solution :

The black bar is actually a background image applied to the body. You coud use multiple backgrounds to get the effect you're after:

body, html {
    background-image: url(library/images/bk_body.jpg), url(your_image.jpg);
    background-repeat: repeat-x, no-repeat;
}