Link to home
Start Free TrialLog in
Avatar of TonyReba
TonyRebaFlag for United States of America

asked on

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!
 User generated image
<!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

ASKER CERTIFIED SOLUTION
Avatar of Eirman
Eirman
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of TonyReba

ASKER

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

> nothing happens
Strange ... It works for me in Dreamweaver
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