Seperating header bg image and body bg image

Hey there:

site is here:

What do I need to do to have a different background image for the body portion than the header?

Right now, the code looks like this:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>


<div class="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.gif" alt="logo" class="logo-image" /></a>


<!--This controls pages navigation bar-->
<div id="pages">

and style:

/*------------------[BASE STYLES]-----------------*/
body { margin: 0px; padding: 0px 0px 0px 0px; color: #413f36; background-color:#f4efd6; background-image: url(images/bodybg.jpg);

the header image I want repeated is named “bg.jpg” and body img “bodybg.jpg”

Right now, whenever I change the background-image, that image is repeated throughout the whole page.

Let me know what other info I need to provide.


Sorry, I’m having a bit of trouble understanding which images you want where. It looks to me like there’s a different bg image on the header and on the body. What am I missing?

Ah ok,

For example, I just changed the background-image in style sheet to the repeating image I want for JUST the header, but it continues throughout the whole page.

I think there may be an overlaying image in the body as well…

check out the site now, you might see what I mean


At the moment you don’t really have a header element to style, so what you could do is just set the background image on the body to repeat across the screen once. So change

body {
  background-color: #F4EFD6;
  background-image: url("images/bg.jpg");


body {
  background: #F4EFD6 url("images/bg.jpg") repeat-x;

wow awesome, thanks