Auto resizing an image in a div while centered and bottom aligned

Question

I am trying to get wrap my head around this and I'm not gaining much ground. I have a background image that is auto scaling to whatever the window size is. In front of it I am trying to center an image that is fixed to the bottom of the page all the while being scalable. This is the CSS that I have right now.

        #guys img{
            width:35%;
            margin-left:auto;
            margin-right:auto;
            bottom:0px;
            position: fixed;
        }   

and this is how i am calling said DIV

    <div id="guys">
        <img src="img/boys.png" alt="">
    </div>

What I end up with is the image fixed to the bottom of the page, and is scalable, but never have I been able to end up with it centered as well. Any thoughts? i would be so grateful!

Answer 1

As I can see your Image is already in a Div make that div relative and margin auto with same width as your Image and everything should work just fine.

        #guys{
        position:relative;
        margin:auto;
        width:35%;

    }       
       #guys img{
        width:35%;
        bottom:0px;
        position: fixed;

    } 

Answer 2

The margin auto stops working once you fixed-position something.

As an alternative you might give the img a left value of 50% (which lines up the center of the page with the left of the image) and then give a margin-left of -17.5% which moves the center of the image to the center of the page.

See my jsfiddle.

Excerpt:

#bottomCentered {

    left: 50%;
    margin-left: -17.5%; /* Half of the width */

    position: fixed;
    width:35%;
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    position: fixed;
    display: inline-block;
    height: 20px;
    background: #00FF00;
}