How to fix image to bottom right in gallery

Question

I have a gallery working fine, but I want to add an image in bottom right of the gallery so I would like to have:

I know this css could solve it:

#container_logo {
    position:fixed;
    right:0;
    bottom:0;
    margin:0;
    width:75%;
    height:75%;
    background:url(http://blog.logobee.com/free-logo1.jpg) no-repeat bottom right;
    background-size:100%;
}

But how to add it to the current code?

I tried adding an extra line background:url(http://blog.logobee.com/free-logo1.jpg) :

#containingDiv {
    width:100%;
    margin:0 auto;
    padding:0px 0 0 0;
    background:url(http://blog.logobee.com/free-logo1.jpg) no-repeat bottom right;
}

but it is not showing in the right place...

• How could I change the container code so it has that fixed image at bottom right?

here is result

Kindly take a look at the complete fiddle

Answer 1

Try setting the width of the div containing the logo to the width of the div containing the picture (make sure this is a non-changing number such as percents). If the height and width are the same as the larger picture. Setting bottom: 0px; right: 0px; bottom: 0px; right: 0px; for the logo should make it appear in the bottom right of the picture. If you are using margin and padding to adjust where the main picture is, make sure it is included for the logo picture so they sit in the same spot no matter what size window it is being viewed in.

Answer 2

Take a look at this http://jsfiddle.net/KGk9f/5/

You need to add

 <div id="container_logo"></div>   

to the

<div id="containingDiv">

And make few CSS changes...

#containingDiv {
width:680px;    
height:470px;
position:relative;

margin:0 auto;
padding:0px 0 0 0;
}

#container_logo {
position:absolute;
z-index:500;
width:150px;
height:150px;

right:0;    
bottom:0;
margin:0;
background:url(http://blog.logobee.com/free-logo1.jpg) no-repeat bottom right;
background-size:100%;

}

Hope it helps...