Solved

Web Page Background image

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Mobile menu navigation , its html and css 6 54
Urgent Help with HTML CSS Positioning 9 42
Bootstrap 3 and Angular 2 12 53
would like the bottom of this page to be smaller 3 16
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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…
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…

910 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

21 Experts available now in Live!

Get 1:1 Help Now