Solved

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

Posted on 2008-06-18
16
1,466 Views
Last Modified: 2011-10-19
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

0
Comment
Question by:JulieArchWeb
  • 8
  • 7
16 Comments
 
LVL 1

Expert Comment

by:MikeBusby
ID: 21816280
You can try adding the line

padding-top: XXpx;

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

Expert Comment

by:bluefezteam
ID: 21816340
you want Big Pic to be attached to the footer?
0
 

Author Comment

by:JulieArchWeb
ID: 21816378
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!

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816404
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

0
 

Author Comment

by:JulieArchWeb
ID: 21816412
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!
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816451
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.
0
 

Author Comment

by:JulieArchWeb
ID: 21816485
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
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816546
ok now we have the bg image at the bottom, add 40px to the height of the bigpic box
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816587
looking better - just refreshed the page, tweak the height until it fits
0
 
LVL 10

Accepted Solution

by:
bluefezteam earned 250 total points
ID: 21816619
also have you applied position absolute to the sub menu? they are appearing over to the left now.

if you apply this

#work {position:relative;}

that may make the dropdown appear directly under the nav rather than to the far left
0
 

Author Comment

by:JulieArchWeb
ID: 21816627
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?
0
 

Author Comment

by:JulieArchWeb
ID: 21816635
Great, just saw your last comment. I'm going to try that now.
0
 

Author Comment

by:JulieArchWeb
ID: 21816717
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
0
 

Author Closing Comment

by:JulieArchWeb
ID: 31468521
Didn't realize I had this space to add the warm and fuzzy thank you message. Oh well. Thanks again!
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816737
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
0
 

Author Comment

by:JulieArchWeb
ID: 21816954
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!
0

Featured Post

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

831 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