possible to shift background DIV down on the page?

My page:

http://www.ludwickfh.com/v2/index.asp

I have a 838px x 200px background DIV, bordered in black temporarily for clarity, class is "background". I want to use this to continue the shadowed background that is further down on the page. But it needs to start at least 676 pixels down, to avoid overlapping the buttons and other graphics that are in the <body> tag. Is it possible to modify my code to make this happen? Thank you!
div.background {
		border-width: 1px;
		border-style: solid;
		z-index: 1
		position: absolute;
		background: #ffffff url("http://www.ludwickfh.com/v2/art/bg_scrolling.jpg") repeat-y center top;
		top: 676px;
		width: 838px;
		height: 200px;
		margin: 0px auto;
		padding: 12px 0px 0px 0px;
		text-align: left;
	}

Open in new window

bbdesignAsked:
Who is Participating?
 
bbdesignConnect With a Mentor Author Commented:
I solved this myself. I decided the layering was not going to work. So I replaced the background with a non-scrolling image and resized the other graphic elements to make it work. Thanks for trying, though.
0
 
CPetrich12Commented:
The problem may not be with your CSS. Does this div.background come after the header and left navigation div? If it doesn't, it should. You may also need to add a "clear: both;" to your CSS depending on if you are using div containers.
0
 
bbdesignAuthor Commented:
They are on separate layers, note the position: absolute;

I'm trying to layer (from top to bottom):

1. Content, buttons, etc.
2. Shadow layer (div.background)
3. <body> and its styles (background image, specifically)
0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
masterpassCommented:
use this class

div.background {
background:url("http://www.ludwickfh.com/v2/art/bg_scrolling.jpg") repeat-y scroll center top #FFFFFF;
border-style:solid;
border-width:1px;
height:200px;
left:212px;
margin:0 auto;
padding:12px 0 0;
position:absolute;
text-align:left;
top:676px;
width:838px;
}
0
 
masterpassCommented:
also you have do the div like this

<div class="background"></div>// should not put the wrapper div into this

<div class="wrapper">
--
---
--
</div>
0
 
bbdesignAuthor Commented:
OK, I did that but now the shadow layer is disconnected from the other content, and the other content no longer floats in the middle:

http://www.ludwickfh.com/v2/index.asp
0
 
masterpassCommented:
modify

div.nav2 {
left:210px;
position:absolute;
top:259px;
z-index:2;
}

and

div.nav1 {
text-align:right;
}

I hope this is the way you wanted it
0
 
bbdesignAuthor Commented:
Hmm, everything is still disconnected.
0
 
masterpassCommented:
modifythis once more

div.background {
background:url("http://www.ludwickfh.com/v2/art/bg_scrolling.jpg") repeat-y scroll center top #FFFFFF;
border-style:solid;
border-width:1px;
height:200px;
left:209px;
margin:0 auto;
padding:12px 0 0;
position:absolute;
text-align:left;
top:676px;
width:838px;
}
0
 
bbdesignAuthor Commented:
Adjusting the "left" doesn't do anything. The DIVs aren't floating correctly. Try changing the size of your browser window with the page open.
0
All Courses

From novice to tech pro — start learning today.