Geek asks and answers

CSS HTML How to align an image within a div in the lower right corner

So I have a div with a background image

Mark as follows

<div class="leadgen">
    <h3><asp:Literal ID="LeadGenSpotTitleLiteral" runat="server"></asp:Literal></h3> 
    <img src="/images/leadGen_hand.png"/>
    <span>
        <asp:Literal ID="LeadGenSpotDescriptionLiteral" runat="server"></asp:Literal>    
    </span>
</div>

What I'm trying to do is save the image <img src="/images/leadGen_hand.png"/>in the lower right corner to the right of the text in the area.

Current CSS

#solutionsNav div.leadgen {
    background:url(/images/leadGen_bg2.png) no-repeat;
    background-size: 100% 100%;  
    padding: 10px;
    color: #FFF;
    cursor: pointer;
}

#solutionsNav div.leadgen h3 {
     font-weight: bold;
     font-family: arial;
     color: #ffffff;
     font-size: 12pt;
     padding-bottom: 3px;
}

#solutionsNav div.leadgen span {
     font-family: arial;
     color: #ffffff;
     font-size: 10pt;
     margin: 0;
     padding: 0;
}

#solutionsNav div.leadgen img {
    padding: 0 5px 10px 10px;
    float: right;
}
+3
source share
1 answer

The only way I could think that the image on the right and bottom using simple CSS is to position it absolutely:

#solutionsNav div.leadgen {
    background:url(/images/leadGen_bg2.png) no-repeat;
    background-size: 100% 100%;  
    padding: 10px;
    color: #FFF;
    cursor: pointer;
    position: relative;
}
#solutionsNav div.leadgen img {
    padding: 0 5px 10px 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}

I don't know if this supports what you want in the layout.

If the image is purely decorative, you can make it part of the background, and then place it in the background-position on the parent element.

+5
source

More articles:


All Articles