Question

I need to place an image … at the bottom right corner inside a div with background image.. the problem is that the image is placed without background of the div.

i have this… im usign boilerplate

 <style>
 #footer-container{
    background: url("img/footer_bg.gif") repeat;
    color: #ccc;
    padding:20px 0;
 }
 #footer-container footer{
    background: url("img/footer_bg.gif") repeat;
    color: #ccc;
    padding:20px 0;
 }
 .wrapper{
    width:1026px; /* 1140px - 10% for margins */
    margin:0 auto;

 }
 #resize{
    float:right;
 }
 </style>
 <div id="footer-container">
    <footer class="wrapper">

    <p class="contacto">
    <i>
    some text here....
    <a href="#">—Contact</a>
    </i>
    </p>

        <div id="contacts">
            <a href="#" class="twitter-link">twitter</a>
            <a href="#" class="dribble-link">dribble</a>
            <a href="#" class="rss-link">rss</a>
        </div>
        <div id="resize">
            <img src="img/resize.png"
            style="position:absolute;right:0px; top:bottom; z-index:2;">
        </div>  
    </footer>
 </div>

Answer 1

I’m not sure I completely understand the issue. But if you want the image to be absolutely positioned inside the div, then I’d add position:relative; to the div you want to anchor the image inside of.