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

enter image description here

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;
}

    CSS Howto..

    How can I convert to a CSS Drop down menu

    How to style object when the user clicks it

    How to set Height of a table in a Bootstrap as the value of Width using CSS?

    CSS: Image is stretched to square, how to crop it?

    How does CSS computation for background percentages work?

    How do I remove the gap between the header and image slider

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    How to control layering in HTML/CSS without making links nonfunctioning?

    How to make slanted CSS arrow pointing to a div

    Cannot get Font Awesome Images to Show

    How to create a CSS only (vertical) drop-down menu?

    How to apply a css class for jqGrid height property setGridHeight?

    How to expand and
  • to fit the width of the
      using css? (or even jquery)
  • Autohide Scrollbars - Show only when necessary

    How to center vertically and horizontally a heading text using flask-bootstrap

    How to get an interactive geographic map for a country? [closed]

    How can I make my form field have a background image?

    How do I vertically center align a position:relative element

    CSS how do you stretch to fit and maintain the aspect ratio?

    How can I change cssText in IE?

    How do I make my webpage scale-able depending on the size of the browser window?

    How do I submit suggestions to the CSS spec? [closed]

    How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

    How to force css borders to display on layered page?

    How to handle Chrome rendering dynamically added elements with incomplete CSS

    CSS - How to set height of absolute div same with neighbor image?

    How should I start to learn JavaScript, jQuery, etc.? My programming knowledge is zero [closed]

    Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

    how to center and Crop an image to square with CSS

    How to set gulp autoprefixer that it will be prefix css when I save my project