Solved

Web Page Background image

Posted on 2008-10-14
5
687 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 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

695 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