pin image to base of site

How do I anchor the main image (man) to the bottom of the page?
http://nsitedesigns.com/nsitedesigns/engaged/index2.html
nsitedesignsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Do you mean fixed on screen at the bottom or to the bottom of the content?
0
nsitedesignsAuthor Commented:
fixed at screen along bottom so it rests just above teal bar.
0
GaryCommented:
Use position:fixed and give a bottom margin 0
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

nsitedesignsAuthor Commented:
Nope that didn't do the trick.  I think that I need to move it out of the sidebar div perhaps?  Here is new working link


http://nsitedesigns.com/nsitedesigns/engaged/index2.html
http://nsitedesigns.com/nsitedesigns/engaged/engaged.css


img.mainpic {
      
      float: right;
      margin-left:8px;
      padding-top:100px;
      
}
0
GaryCommented:
css should be
img.mainpic {
    bottom: 0;
    margin-left: 8px;
    padding-top: 100px;
    position: fixed;
    right: 0;
}

I'm not sure this is exactly what you want.
0
nsitedesignsAuthor Commented:
CLose but no cigar.  I want the bottom of the photo to be anchored to the top of the footer teal bar.  What you provided has it anchored to the bottom of the page entirely.
0
GaryCommented:
Ok
Move it into the footer and give it a negative margin-top.
0
nsitedesignsAuthor Commented:
Closer.... but it is still "off"

http://nsitedesigns.com/nsitedesigns/engaged/index.html

img.mainpic {
margin-top:-567px;
margin-left:900px;

}
0
nsitedesignsAuthor Commented:
I figured it out!  I put the image as the background on the container!  Wahoo!
0
nsitedesignsAuthor Commented:
http://nsitedesigns.com/nsitedesigns/engaged/test.html

Only problem is now the footer background image doesn't display.  : (
0
nsitedesignsAuthor Commented:
Change in plans.  Don't like the way this was heading.  I increased size of image, lowered its opacity and placed as a background.  Now how do I fix the footer so the footer teal band extends across the page?
0
GaryCommented:
Move the footer div out of the container div.
0
nsitedesignsAuthor Commented:
Fix one thing and another thing goes wacko.  So, now the blue footer works great but the image that should be in the center content area is sky high.   I put the image p_targetbw.jpg into the container.

.container {
      width: 950px;
      background-color: #FFF;
      margin: 48px auto 0 auto;
      background-image:url(img/p_targetbw.jpg);
      background-repeat:no-repeat;
      background-position: bottom, right;
}
0
nsitedesignsAuthor Commented:
thanks for the help.  I ended up tossing the original idea.  Just wasn't looking right.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.