• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 347
  • Last Modified:

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

0
TonyReba
Asked:
TonyReba
  • 2
  • 2
2 Solutions
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now