Solved

Web Page Background image

Posted on 2008-10-14
5
682 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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 …

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now