3

So I have a div with a background image

Mark up 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 am trying to do is to keep the image <img src="/images/leadGen_hand.png"/> on the bottom right floating to the right of the text in the span.

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; }
Improve this question
1
  • <asp:Literal>? Pretty sure that's not rendered HTML. Commented Apr 25, 2012 at 16:54

1 Answer 1

Reset to default
6

The only way I could think to keep the image on the right and bottom, using plain 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 that maintains what you want in the layout, though.

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yeah the image is decorative the reason why it cant be part of background image is because the background images streches and grows based on content and I dont want text/content going over the decorative image. That above didnt work for me the image didnt display at all anymore within the div
You would have to add 'position: relative' to the parent <div> - I should have added that. If you want to try the background-image route, though, I would just make sure the padding-bottom is larger than the size of the decorative element, which would prevent text from running over it.
Yeah that worked nicely now with adding position relative and messing with padding a bit. Thanks man !

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.