Hey there,
My site is here:
www.yourvancouvermortgagebroker.ca
Right now, as a temp solution, I am just using a border: 20px solid #92B14A;
I’m trying to figure out how to wrap everything in a <div> and give it a margin, then just change the background colour to #92B14A (while keeping the grey colour for the rest).
Does this make any sense? The border method just kind of shrinks the page.
Thanks
You could wrap everything from #page-wrap down in a #wrapper div, and move the body bg image to that wrapper div. Then change the body styles to just a background color of green, and put a margin on the #wrapper:
body {
background: #92B14A;
}
#wrapper {
background: #E7E9EB url("images/header_bg.jpg") no-repeat center top;
margin: 20px;
}
Exactly.
I just wanted to point out that some tutorials may suggest using the bgcolor=“” in your tags, but that is outdated and I recommend not doing so.
For example to make the background colour of your entire website red, it would suggest that you do
<!Doctype HTML>
<html lang="en">
<head>
</head>
<body bgcolor="#ff0000;">
</body>
</html>
However using css is the more approbate method.
Remember to style elements or refer to them in css"
name_of_tag{
/*styling goes here */
}
.class_of_a_tag{
/*styling goes here */
}
#id_of_a_tag{
/*styling goes here */
}
Or you can use hybrid of these such as:
name_of_tag.class_name{
/*styling goes here */
}
The above styles Only tags of the type specified with the class.
So
body.redHome{
background-color:#ff0000;
}
would only set the background-colour of the website to red if the body tag had a class of redHome. Such as:
<body class=“redHome”></body>
This works better when there is more than one tag used in the page. In html documents; however, there is only one body tag that is used.
Also something that may help is that
with the background property, one can put and image and colour in that tag so that the latter one can be a fallback for the earlier, as in:
background:#ff000 url(images/red.jpg);
Where as background-color only accepts colours and background-image only excepts a url path to an image.
Hope that helped,
Team 1504 
Thanks guys
I thought I followed the instructions, but I’m losing my formatting. I added the
#wrapper {
background: #E7E9EB url(“images/header_bg.jpg”) no-repeat center top;
margin: 20px;
}
And a <div id="wrapper> above #page-wrap and </div> at the very bottom.
Here’s the before/after
Where am I going wrong?
The link you posted aove doesn’t have the wrapper in place, so I can’t check what you’ve done. Without seeing the code, the only thing I notice is this:
Notice that id="wrapper is missing the closing quotes. That would cause it to fail, so if that was what you used, try it again with <div id=“wrapper”>.
Ok code is in place now. thx
At the moment your page-wrap div doesn’t wrap around all of the content, only just the top bit, so see if you can fix that. (There may be a closing div somewhere there shouldn’t be, but I can’t quite tell from Firebug.)
Validating the page might help find the error: http://validator.w3.org/
Here’s the code I’m using. Sorry, I’m a total noob at this stuff. Taking a CSS course right now. The site validator has too many errors for me to know where to start 
<body<?php if (is_front_page()) echo(’ id=“home”'); ?>>
<div id=“wrapper”>
<div id="page-wrap">
<div id="header">
<!-- Start Logo -->
<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="Vancouver Mortgage Broker" id="logo" /></a>
<!-- End Logo -->
<!-- Start Searchbox -->
<div id="search-form">
<form method="get" id="searchform1" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php _e('search this site...','Minimal'); ?>" name="s" id="searchinput" />
</form>
</div>
<!-- End Searchbox -->
<div class="clear"></div>
<ul class="superfish nav clearfix">
<?php if (get_option('minimal_home_link') == 'on') { ?>
<li <?php if (is_front_page()) echo('class="current_page_item"') ?>><a href="<?php bloginfo('url'); ?>"><?php _e('Home','Minimal'); ?></a></li>
<?php }; ?>
<?php if ($category_menu <> '<li>No categories</li>') echo($category_menu); ?>
<?php echo $page_menu; ?>
</ul> <!-- end ul.nav -->
<?php if(!is_home() && !is_front_page()) include(TEMPLATEPATH. '/includes/breadcrumb.php'); ?>
</div> <!-- end #header -->
</div>
Ah, right, I should have taken into account that this is a WordPress site, so the bits and pieces are spread across files. Hmm. Well, one thing I could suggest is to find where the closing div for the page-wrap div is and add an extra closing div after it. (It’s not in what you posted below … you might find it in footer.php … but I’m so rusty with WP now that I can’t remember where everthing is. But in your theme folder you should be able to look at the various bits that make up the template. Somewhere there will be a </div> that closes off the page-wrap div, and you need another one there for the #wrpeer div.
Once you find that, we’ll have to tweak the css a little more.
It was in the footer, thanks a lot. Seems like it did the trick.
Great! Glad it was that easy.
One further thing I recommend is to add an extra line to your css. At the moment, on narrow screens (or if you narrow down the browser width) the inner bits blow out of the wrapper. So add the following line in red:
#wrapper {
background: #E7E9EB url("images/header_bg.jpg") no-repeat center top;
margin: 20px;
[COLOR="Red"]min-width: 960px;[/COLOR]
}