asked on

Web Page Background image

Hi,
I am building a site using Div tags.

I have everything ready to work EXCEPT THE PAGE BACKGROUND.

I have attached a mock image of what I am trying to acheive.

I have a main page structure which is ok and is working. The problem is there is a patterned page background image which needs to be repeated depending on how long the page is for each page.

i have added an image in body

BODY {
margin: 0px 0px 0px 0px;
background: #a1a677 url(/images/pagebg.jpg) repeat-y;
height: 100%;
}

But it doesn't show up in the site...

The Whole css is attached as well as the main page.

Can someone please show me what I am doing wrong or what I can do to add this patterned background??

Image attaced also

CSS
-------------------------------
 
/* custom stuff */
#maincontainer{
width: 902px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
 
#contentwrapper{
float: center;
width: 902px;
background:url(images/maincontentbg.jpg) repeat-y;
padding-left:20px;
padding-right: 20px;
padding-top:-20px;
padding-bottom: 50px;
 
}
 
#footer {
        height: 121px;
        background: #000;      
        text-align: center;
        clear: both;
        line-height: 30px;
        background:url(images/bottom.jpg) repeat-x;
		font-size: 12px;
		line-height: 120%;
		font-family: Arial, Tahoma, Helvetica, sans-serif;
		color: #FFFFFF;
		vertical-align:bottom;
}
 	
 #bottom_bottom {
        height: 30px;
        background: #161e23;     
        clear: both;
        height: 30px;
        line-height: 30px;
 
}
 
#top {
        height: 110px;     
        clear: both;
		background:url(images/top.jpg) repeat-x;
}
#top_top {
        height: 30px;
        background: #161e23;     
        clear: both;
        color: #999;
}
 
a:link {
	color: #a7d0ff; 
	text-decoration: none;
}
 
 
a:hover {
        color: #324553;
      
}
 
a:visited {
        color: #a7d0ff;
		text-decoration: none;
      
}
 
 
 
html {
  height: 100%;
  margin-bottom: 1px;
}
 
BODY {
        margin: 0px 0px 0px 0px;
        background: #a1a677 url(/images/pagebg.jpg) repeat-y;
        height: 100%;
}
 
td,tr,p,div {
        font-family:  Arial,Verdana, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 13pt;
        color: #FFFFFF;
}
 
ul
{
        margin: 0;
        padding: 0;
        list-style: none;
}
 
ul li
{
        line-height: 20px;
        padding-left: 15px;
        padding-top: 0px;
        background-image: url(images/blog_bullet.png);
        background-repeat: no-repeat;
        background-position: 0px 5px;
}
#left_menu {
    float: left;
	margin-top: 3px;
	margin-left: 20px;
	z-index: 6;
	width: 167px;
}
 
 
INDEX.HTML
-------------------------------------------------
<!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" />
<link rel="stylesheet" type="text/css" href="template_css.css" />
<title>TEST SITE</title>
 
 
<div id="maincontainer">
 
<div id="top_top">Top Top</div>
 
 
<div id="top">Top </div><!--end top-->
 
<div id="contentwrapper">Content Wrapper</div> <!--end contentwrapper-->
 
 
<div id="footer">Footer </div>
    
<div id="bottom_bottom">Bottom Bottom</div>
</div> <!--end maincontainer-->
 
 
</body>
</html>

Open in new window

Background.jpg

codezp

change this line

background:url(images/maincontentbg.jpg) repeat-y;

to

background:url(images/maincontentbg.jpg) repeat scroll 0 0;

Amanda Watson

ASKER

Did you mean for the content wrapper?

That is part of the page within the white area on the picture attached.

i am trying to work with the body background?

ASKER CERTIFIED SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Amanda Watson

ASKER

Brilliant Scratchboy!

Thank YOU!

scrathcyboy

my pleasure !