We help IT Professionals succeed at work.

How to change the Css page background

TonyReba
TonyReba asked
on
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

Comment
Watch Question

Chief Operations Manager
Commented:
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)
Commented:
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;
}

Author

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

EirmanChief Operations Manager

Commented:
> nothing happens
Strange ... It works for me in Dreamweaver

Author

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