[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Web Page Background image

Posted on 2008-10-14
5
Medium Priority
?
692 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
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

656 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