How to change the Css page background

I would like to create a page background simmilar to the one on:

http://www.aapc.com/

My current markup is next, I am having issues on how to set like a main background on the website, and then all content white background.  

Also I am attaching the style sheet here.

Thanks in advance!
 bg-body
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Doctors Hospital at Renaissance - ICD-10 Website</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="wrapper" >
        <div class="wrapper-holder">
 
<div id="main">
<div id="header">
 
 
<div id="banner">
<div class="logo2"><a href="http://www.maadesigns.co.uk/services/identity-designs/logo-design-services.htm">Logo 
    1</a></div>
</div>
<!--<div class="menupanel">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div> -->
<div id="content">
<div class="col1">
<div class="sidelinksheader">Menu Navigation </div>
<ul>
<li><a href="default.aspx">
    Home</a></li>
<li><a href="ProjectSchedule.aspx">Project 
    Schedule</a></li>
<li><a href="DepartmentPage.aspx">
    Department Pages</a></li>
<li><a href="MedicalOffices.aspx">
    Medical Offices Page</a></li>
<li><a href="Training.aspx">
    Training</a></li>
<li><a href="Testing.aspx">Testing</a></li>
<li><a href="FAQ.aspx">
    FAQS</a></li>
<li><a href="ContactUs.aspx">
    Contact Us</a></li>
    
</ul>
</div>
<div id="widget" class="widget">
<script  type="text/javascript" src="http://widgets.aapc.com/countdown/aapc_cdwidgetbox_300.js"></script>
</div>
 
<div id="survey" class="survey">
 
Survey from WebMonkey Link.
 
</div>
 
<div class="col2">
 
 
    <h1>Introduction</h1> 
On October 1, 2013, the ICD-9 coding for medical diagnoses and inpatient procedures will be replaced by ICD-10 
 
 
 
·<br />
<br />
The transition to ICD-10 is occurring because ICD-9 produces less specific information about patients&#8217; medical conditions and hospital inpatient procedures.<br />
<br />
ICD-9 is 30 years old, has outdated terms, and is inconsistent with current medical practices.  
 
 
 
<br />
<br />
The U.S. is the only industrialized nation that is still using ICD-9.<br />
<br />
ICD-10 will affect diagnosis and procedure coding for all patients types, not just those who submit Medicare or Medicaid claims.
<br />
<br />
ICD-10 diagnosis and procedure codes must be used for all health care services provided in the U.S. on or after October 1, 2013.<br />
<br />
Claims with ICD-9 codes for services provided on or after October 1, 2013, will not be paid. 
 
 
 
<br />
<br />
Healthcare is a global community. In order to be compliant we need to be   compatible with the international version of ICD-10.
<br />
<br />
ICD-10 transition is a huge project that has the potential to impact every department/unit within the hospital, as well as every physician and their medical offices.  Over the next few months the ICD-10 Steering Committee will be releasing Awareness Bulletins, such as this one, to inform you of the wide-spread impact this transition will have, as well as what we are doing to mitigate this impact. 
 
 
 
 
</div>
</div>
<div id="footer"><a href="#">Doctors Hospital at Renaissance</a> ::&nbsp; <a href="#">Home</a> :: 
    <a href="#">Contact Us</a> </div>
</div>
</div>
 
 
 
</div>
</div>
</body>
</html>

Open in new window

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
		
}

#main
{
    width: 900px;
    margin-right: auto;
    margin-left: auto;
 }
 
 
#main #footer 
{
   
	font-family: Arial,Helvetica,sans-serif;
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
	font-size: 11px;
	text-align: center;
	width: 900px;
	padding-top: 8px;
	padding-bottom: 8px;
	clear: both;
	color: #000000;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #00A7CE;
}

#wrapper
{
    background-color:White;
   /* background: url('bg-wrapper1.gif') repeat-y 50% 0;*/
    
}
#wrapper .wrapper-holder

{
    width:900px;margin:0 auto;border-top:1px solid #e6e7e8;
 
 
 }
.title1 {
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
	font-family: Arial,Helvetica,sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #006699;
}


#main #footer a {
	color: #0283A3;
	text-decoration: none;
}
#main #footer a:hover {
	color: #00CCFF;
	text-decoration: none;
}


#main #header .menupanel {
	float: left;
	height: 30px;
	width: 900px;
	background-color: #00A7CE;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000000;
	visibility:hidden;
}
#main #banner {
	background-image: url(../images/banner.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 240px;
	width: 900px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #0283A3;
	margin-bottom: 5px;
}
#main #header {
	float: left;
	width: 900px;
}
#main #content {
	float: left;
	width: 900px;
}
.col2 a {
	text-decoration: none;
	color: #006699;
}
.col2 a:hover {
	color: #666666;
}

#main #content .col1 {
	float: left;
	width: 240px;
	background-color: #F7F7F7;
	margin-top: 5px;
	height: 260px;
}
.sidelinksheader {
	background-image: url(../images/sidelinks.jpg);
	background-repeat: repeat-x;
	font-family: tahoma, verdana, arial;
	font-size: 16px;
	color: #006699;
	float: left;
	width: 230px;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.col1 ul {
	margin: 0px;
	padding: 0px;
	list-style-image: none;
	list-style-type: none;
}
.col1 li {
	display: inline;
}
.col1 li a {
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
	font-family: Arial,Helvetica,sans-serif;
	font-size: 13px;
	color: #000000;
	text-decoration: none;
	width: 225px;
	padding-left: 15px;
	float: left;
	display: block;
	line-height: 20px;
	margin-top: 2px;
	background-color: #EFEFEF;
	padding-top: 2px;
	padding-bottom: 2px;
	height:17px;
}
.col1 li a:hover
{
    color: #FFFFFF;
    background-color: #5b9dbd;
}



.widget {
	float: right;
	width: 640px;
	margin-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding: 10px;
}

.survey {
	float: right;
	width: 640px;
	margin-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding: 10px;
    height: 6px;
}
#main #content .col2 {
	float: right;
	width: 640px;
	margin-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding: 10px;
}



#main #header .logo {
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: Arial,Helvetica,sans-serif;
	font-size: 24px;
	color: #006699;
	font-weight: bold;
	float: left;
	width: 880px;
	padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
}
#main #header .logo a {
	color: #006699;
	text-decoration: none;
}

#main #header .menupanel ul {
	margin: 0px;
	padding: 0px;
	list-style-image: none;
	list-style-type: none;
}
#main #header .menupanel li {
	display: inline;
}
#main #header .menupanel li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	display: block;
	height: 30px;
	line-height: 30px;
	float: left;
	background-color: #00A7CE;
	background-image: url(../images/menu_link.jpg);
	background-repeat: no-repeat;
	background-position: right center;
	margin-left: 15px;
	width: 124px;
}
#main #header .menupanel a.current {
	background-image: url(../images/menu_hover_active.jpg);
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#main #header .menupanel a:hover {
	color: #000000;
	background-image: url(../images/menu_hover_active.jpg);
}
.smallfont {
	font-size: 11px;
	font-weight: normal;
}
#main #banner2 {
	background-image: url(../images/illustration_image2.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 300px;
	width: 900px;
	background-color: #FFFFFF;
	background-position: right;
}
#banner2 .col111 {

	float: left;
	width: 200px;
	background-color: #F7F7F7;
	margin-top: 5px;
	height: 295px;
}
.col111 ul {

	margin: 0px;
	padding: 0px;
	list-style-image: none;
	list-style-type: none;
}
.col111 li {

	display: inline;
}
.col111 li a {
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
	font-family: Arial,Helvetica,sans-serif;
	font-size: 14px;
	color: #000000;
	text-decoration: none;
	width: 185px;
	padding-left: 15px;
	float: left;
	display: block;
	line-height: 20px;
	margin-top: 2px;
	background-color: #EFEFEF;
	padding-top: 2px;
	padding-bottom: 2px;
}
.col111 li a:hover {

	color: #FFFFFF;
	background-image: url(../images/1021.jpg);
	background-repeat: repeat-x;
}
#main #content .col222 {

	float: left;
	width: 880px;
	margin-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding: 10px;
}
.col222 a {
	text-decoration: none;
	color: #990000;
}
.col222 a:hover {

	color: #666666;
}
#main #banner .logo2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #0283A3;
	font-weight: bold;
	float: left;
	width: 880px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: left;
	padding-right: 20px;
	background-color: #DBF0F9;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #0283A3;
}
#main #banner .logo2 a {

	color: #0085A6;
	text-decoration: none;
}
h1
{
    /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
   font-family: Arial,Helvetica,sans-serif;
	font-size: 22px;
	font-weight: bold;
	line-height:125%;
	/*color: #006699;*/
	color:Black;
}


h2{font-size:16px;}h3{font-size:14px;}h4{font-size:12px;}h5{font-size:10px;}h6{font-size:8px;}

Open in new window

LVL 9
TonyRebaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

EirmanChief Operations ManagerCommented:
Put this in the BODY portion of your CSS

background-image: url(../images/bg-body1.gif);

(Assumes you have the gif in the images folder)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CCSOFlagCommented:
Be sure to include background-repeat.  That is a smal gif, so you'll want it to repeat both directions on the page.

body
{
      background-image: url(Background.gif);
      background-repeat: repeat-x repeat-y;
}
0
TonyRebaAuthor Commented:
nothing happens

body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      background-image: url(../images/bg-body1.gif);
      background-repeat: repeat-x repeat-y;
            
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Doctors Hospital at Renaissance - ICD-10 Website</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="wrapper" >
        <div class="wrapper-holder">
 
<div id="main">
<div id="header">
 
 
<div id="banner">
<div class="logo2"><a href="http://www.maadesigns.co.uk/services/identity-designs/logo-design-services.htm">Logo 
    1</a></div>
</div>
<!--<div class="menupanel">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div> -->
<div id="content">
<div class="col1">
<div class="sidelinksheader">Menu Navigation </div>
<ul>
<li><a href="default.aspx">
    Home</a></li>
<li><a href="ProjectSchedule.aspx">Project 
    Schedule</a></li>
<li><a href="DepartmentPage.aspx">
    Department Pages</a></li>
<li><a href="MedicalOffices.aspx">
    Medical Offices Page</a></li>
<li><a href="Training.aspx">
    Training</a></li>
<li><a href="Testing.aspx">Testing</a></li>
<li><a href="FAQ.aspx">
    Faqs</a></li>
<li><a href="ContactUs.aspx">
    Contact Us</a></li>
    
</ul>
</div>
<div id="widget" class="widget">
<script  type="text/javascript" src="http://widgets.aapc.com/countdown/aapc_cdwidgetbox_300.js"></script>
</div>
 
<div id="survey" class="survey">
 
Survey from WebMonkey Link.
 
</div>
 
<div class="col2">
 
 
    <h1>Introduction</h1> 
On October 1, 2013, the ICD-9 coding for medical diagnoses and inpatient procedures will be replaced by ICD-10 
 
 
 
·<br />
<br />
The transition to ICD-10 is occurring because ICD-9 produces less specific information about patients&#8217; medical conditions and hospital inpatient procedures.<br />
<br />
ICD-9 is 30 years old, has outdated terms, and is inconsistent with current medical practices.  
 
 
 
<br />
<br />
The U.S. is the only industrialized nation that is still using ICD-9.<br />
<br />
ICD-10 will affect diagnosis and procedure coding for all patients types, not just those who submit Medicare or Medicaid claims.
<br />
<br />
ICD-10 diagnosis and procedure codes must be used for all health care services provided in the U.S. on or after October 1, 2013.<br />
<br />
Claims with ICD-9 codes for services provided on or after October 1, 2013, will not be paid. 
 
 
 
<br />
<br />
Healthcare is a global community. In order to be compliant we need to be   compatible with the international version of ICD-10.
<br />
<br />
ICD-10 transition is a huge project that has the potential to impact every department/unit within the hospital, as well as every physician and their medical offices.  Over the next few months the ICD-10 Steering Committee will be releasing Awareness Bulletins, such as this one, to inform you of the wide-spread impact this transition will have, as well as what we are doing to mitigate this impact. 
 
 
 
 
</div>
</div>
<div id="footer"><a href="#">Doctors Hospital at Renaissance</a> ::&nbsp; <a href="#">Home</a> :: 
    <a href="#">Contact Us</a> </div>
</div>
</div>
 
 
 
</div>
</div>
</body>
</html>

Open in new window

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ICD-10 Website</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper" >
        <div class="wrapper-holder">

<div id="main">
<div id="header">


<div id="banner">
<div class="logo2"><a href="http://www.maadesigns.co.uk/services/identity-designs/logo-design-services.htm">Logo 
    1</a></div>
</div>
<!--<div class="menupanel">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div> -->
<div id="content">
<div class="col1">
<div class="sidelinksheader">Menu Navigation </div>
<ul>
<li><a href="default.aspx">
    Home</a></li>
<li><a href="ProjectSchedule.aspx">Project 
    Schedule</a></li>
<li><a href="DepartmentPage.aspx">
    Department Pages</a></li>
<li><a href="MedicalOffices.aspx">
    Medical Offices Page</a></li>
<li><a href="Training.aspx">
    Training</a></li>
<li><a href="Testing.aspx">Testing</a></li>
<li><a href="FAQ.aspx">
    Faqs</a></li>
<li><a href="ContactUs.aspx">
    Contact Us</a></li>
    
</ul>
</div>
<div id="widget" class="widget">
<script  type="text/javascript" src="http://widgets.aapc.com/countdown/aapc_cdwidgetbox_300.js"></script>
</div>

<div id="survey" class="survey">

Survey from WebMonkey Link.

</div>

<div class="col2">

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>


</div>
</div>
<div id="footer"><a href="#">Doctors Hospital at Renaissance</a> ::&nbsp; <a href="#">Home</a> :: 
    <a href="#">Contact Us</a> </div>
</div>
</div>



</div>
</div>
</body>
</html>

Open in new window

0
EirmanChief Operations ManagerCommented:
> nothing happens
Strange ... It works for me in Dreamweaver
0
TonyRebaAuthor Commented:
I got it working but I had to define this
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background: url('bg-body1.gif') repeat 0% 0;
	
}

#main
{
    border: 1px solid #e6e7e8;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
}

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.