?
Solved

Web Page Background image

Posted on 2008-10-14
5
Medium Priority
?
688 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:Amanda Watson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 4

Expert Comment

by:codezp
ID: 22715841
change this line

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

to

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

Author Comment

by:Amanda Watson
ID: 22715970
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?
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 2000 total points
ID: 22716186
HTML

<BODY background="images/maincontentbg.jpg" >
all page content
</BODY>

CSS

BODY { background-image: url("images/maincontentbg.jpg"); }
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 22716255
Brilliant Scratchboy!

Thank YOU!
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22716429
my pleasure !
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month11 days, 23 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question