asked on

How can I move the background image on a div tag down the page?

It's about CSS and HTML. How can I move the background image in the div id "bigPic" down the page, so the entire picture is showing? In doing so I'm hoping that the footer will align directly below "bigPic".

Here is the draft page: http://www.archwebworks.com/neeeac/index.html

This is my first time asking a question, so if I'm providing too much info or not enough, please let me know. Thanks in advance for the help. I am so happy to find this site!

/*
 
NEEEAC CSS
 
*/
 
* {
	padding: 0px;
	margin: 0px;
}
 
h1, h2, h3, h4, h5, h6, p {
    margin: 0px;
}
 
body {
	text-align: center; /* IE Center Fix */
	margin: 0 auto;
	width: 800px;
	background-color: #999966;
}
 
 
 
div#container {
	text-align: left; /* align reset */
}
 
/* Header (start) */
 
 
div#header {
	text-indent: -9999px;
	width: 800px;
	height: 105px;
	background-color: #999966;
	background-image: url(../img/header.jpg);
	background-repeat: no-repeat;
}
 
/* Navigation (start) */
 
ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
 
li {
float: left;
}
 
a {
display: block;
text-decoration: none;
text-align: center;
font-family: Verdana, Arial, sans-serif;
font-size: small;
color: #ffffff;
background-image: url(../img/navbg.jpg);
padding: 5px;
margin: 0px;
height: 21px;
}
 
li#blank a {
	width: 48px;
 }
 
li#home a {
	width: 57px;
 }
 
li#glance a {
	width: 94px;
}
 
li#work a {
	width: 170px;
}
 
li#speakers a {
	width: 136px;
}
 
li#details a {
	width: 66px;
}
 
li#register a {
	width: 74px;
}
 
li#contact a {
	width: 75px;
}
 
 
#navigation li ul {	
	display: block;
	visibility: hidden;
	left: 0px;
	width: 170px;
	margin: 0;
}
 
#navigation li:hover ul {
	visibility: visible;
	z-index: 100;
}
 
 
 
/* middle (start) */
 
 
div#bigPic {
	text-indent: -9999px;
	width: 800px;
	height: 450px;
	background-color: #999966;
	background-image: url(../img/homepage_image.jpg);
	background-repeat: no-repeat;
}
 
/* supages */
 
div#content{
	margin: 0px auto;
	width: 800px;
}
 
div#sidebar {
	width: 200px;
	background-color: white;
	float: left;
 
}
 
div#main {
	width: 600px;
	background-color: white;
	float: right;
 
}
/* Footer Start */
div#clearFloats {
	clear: both;
}
 
div#footerContainer {
	background-image: url(../img/footer.jpg);
	background-repeat: no-repeat;
	height: 34px;
	text-align: center;
}
 
 
**** 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" xml:lang="en" lang="en">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>New England Enviromental Educators Alliance 2008 Conference</title>
 
<link href="css/main3.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
<div id="container">
 
 
<div id="header">
<p>New England Enviromental Educator's Alliance (NEEEA) 2008 Conference - Bringing the Journey Home</p>
</div>
<ul id="navigation">
 <li id="blank" title=""><a href="#"></a></li>
 <li id="home" title="link to homepage"><a href="#">Home</a></li>
 <li id="glance" title="link to At A Glance"><a href="#">At A Glance</a></li>
 
 
 <li id="work" title="link to Schedule"><a href="#">Workshops and Activities</a>
 
 	<ul class="selected" >
		<li id="schedule" title="link to Schedule"><a href="#">Schedule</a></li>
		<li id="saturday" title="link to Saturday workshops"><a href="#">Saturday Workshops</a></li>
		<li id="sunday" title="link to Sunday Workshops"><a href="#">Sunday Workshops</a></li>
		<li id="field" title="link to field trips"><a href="#">Field Trips</a></li>
		<li id="entertainment" title="link to Entertainment"><a href="#">Entertainment</a></li>
		
	</ul>
 </li>
  <li id="speakers" title="link to keynote speakers"><a href="#">Keynote Speakers</a></li>
 <li id="details" title="link to details page"><a href="#">Details</a></li>
 <li id="register" title="link to register page"><a href="#">Register</a></li>
 
 <li id="contact" title="link to conference info"><a href="/#">Contact</a></li>
</ul>
 
 
 
<div id="bigPic">
<p>New England Enviromental Educator's Alliance (NEEEA) 2008 Conference.  42nd Annual New England
Environmental Education Alliance Conference
 
Oct. 3-5 at the Sargent Center for Outdoor Education
in Hancock, New Hampshire  " 50 Sessions explore strands of Building Communities, Built Environment and Ecology of Communities 
" Keynotes speakers Gibran Rivera of the Interaction Institute for Social Change, and Becky Rule, storyteller and humorist 
" New for 2008 - Sunday in the Field: visit local sites and see ecological communities in action.
" Community Art Project, Carpool Challenge, Field Trips and more. /p>
</div>
 
<div id="clearFloats"></div>
 
<div id="footerContainer">
 
<p></p>
 
</div>
 
</div>
 
</body>
 
</html>

Open in new window

MikeBusby

You can try adding the line

padding-top: XXpx;

to your id where the x's are add the amount of pixels you need.

bluefezteam

you want Big Pic to be attached to the footer?

JulieArchWeb

ASKER

to bluefezteam - Well, not really because I want to use the footer on all the subpages, which will have content about the conference. I just want the footer to be directly below the big Pic. Thank you!

bluefezteam

I'm not understanding the question, what I can see is your nav bar with an image beneath it and then a large gap followed by the footer.

If you want the footer to fit under the image directly - change the height of bigpic to around 350px.

however if you want the background image to appear at the bottom of the div next directly above the footer try this in the #nigPic css code

background: #999966 url(../img/homepage_image.jpg) no-repeat bottom left;

Open in new window

JulieArchWeb

ASKER

to Mike - oddly enough, I added a padding-top to the big Pic, and it's not moving at all. In fact, the footer is moving further down the page, the more padding I add. But the footer div not associated with the "big pic" dive. Any other ideas? Should I not be using the "big Pic" as a bg image with CSS? Maybe just put it right in the html?

Thanks for your help!

bluefezteam

in IE 7, the drop down menu you are using is making the BIG IMAGE appear lower down in the page where the last item of the menu appears.

This is because you aren't using a position absolute to make the subitems hover above the page, so it's being distorted.

JulieArchWeb

ASKER

bluefezteam - Thanks, that helped the footer issue. Sorry if I didn't explain the first problem in more detail. Basically, there is more to the big pic than is being shown. I'm going to attach the jpg so you can see that there should be a top white horizontal line and more of the pictures visible.
Here is an updated link with the footer fixed: http://www.archwebworks.com/neeeac/index.html

It's like I need the big picture to move down the page 20 pixels or so.

Thank you!!
homepage-image.jpg

bluefezteam

ok now we have the bg image at the bottom, add 40px to the height of the bigpic box

bluefezteam

looking better - just refreshed the page, tweak the height until it fits

ASKER CERTIFIED SOLUTION

bluefezteam

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JulieArchWeb

ASKER

Awesome!! Thank you so much! http://www.archwebworks.com/neeeac/index.html

Can I ask about the absolute positioning on the drop down nav? I added position:absolute; to the #navigation li ul { } and it's way to the left. It's my very novice understanding that the position attribute is only relevant if it's associated with a relative positioning attribute.

Should I fix the problem by adding an position-x value to the drop down?

JulieArchWeb

ASKER

Great, just saw your last comment. I'm going to try that now.

JulieArchWeb

ASKER

It worked! http://www.archwebworks.com/neeeac/index.html

Thank you! I think I'll have more issues as the day goes on, but I really appreciate your help. This is the third site that I'm doing in CSS, and it's quite difficult. It's nice to know people respond so promptly and effectively here. Totally worth the cash.

Thanks again!
Julie

JulieArchWeb

ASKER

Didn't realize I had this space to add the warm and fuzzy thank you message. Oh well. Thanks again!

bluefezteam

cool - here's another tip that may make the site compatible in IE (does it get me the full 500 points lol)

#navigation{margin;0;padding:0}

in IE there's ghost gap caused by the UL for the navigation.

Look forward to the points :0D

JulieArchWeb

ASKER

I sure hope I gave you the points! And if I could figure out how to make it 500 pts I would. Will do for next time. Have a good one!