Solved

Web Page Background image

Posted on 2008-10-14
5
685 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
  • 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 500 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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 to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

808 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