文字和背景图片上方的按钮

Question

I am trying to add text and a button on top of a background image I cannot figure out the CSS for the margins and positions on liquid page.If you can steer me in the right direction or help. Thank you!

 .feature_home{ margin:? position:? } .feature_image{ margin:? position:? } .feature_text{ margin:? position:? } .feature_button{ margin:? position:? } 

 <div class="feature_home"> <img class="feature_image" alt="Thanks For your guys help" src="images/xyz.com"> <p class="feature_text">I really appreciate your guys help!</p> <a class="feature_button" href="/xyz-101/">Thank You</a> </div> </div> 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x background Image               x                
x                   Text Here:   X
x                   Text Here:   x                             
x                                x
x                   Button Here: x  
x                                x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

It wont let me ad an image until I get 10 reputations to post image.

Answer 1

You can just get rid of <img> and use background-image style on .feature_home and give it a position:relative; so you can position feature_home and feature_button like you want it.

Here you have HTML code:

<div class="feature_home" style="background-image:url(image);">
   <p class="feature_text">I really appreciate your guys help!</p>
   <a class="feature_button" href="/xyz-101/">Thank You</a>
</div>

And here is CSS:

.feature_home{
    width:300px;
    height:200px;
    position:relative;
    display:block;
    background-position:center center;
    background-size:100%;
}
.feature_text{
    position:absolute;
    right:2px;
    bottom:15px;
}
.feature_button{
    right:2px;
    bottom:2px;
    position:absolute;
}

All the values are for example :)

http://jsfiddle.net/cjtdhcLr/

Answer 2

Is this what you are looking for?

 .feature_home{ position: relative; display: table-cell; vertical-align: bottom; text-align: right; width: 350px; /* image width */ height: 150px; /* image height */ } .feature_image{ position: absolute; top: 0; left: 0; z-index: -1; } 

 <div class="feature_home"> <img class="feature_image" alt="Thanks For your guys help" src="http://placehold.it/350x150"> <p class="feature_text">I really appreciate your guys help!</p> <a class="feature_button" href="/xyz-101/">Thank You</a> </div> 

http://jsfiddle.net/7zvL5zto/2/

Answer 3

Here is something that will work, and instead of the red background choose your image

 .feature_home { width:400px; background:red; float:left; padding:15px } p { text-align:right; } a { float:left; text-align:right; width:100%; } 

 <div class="feature_home"> <p class="feature_text">I really appreciate your guys help!</p> <a class="feature_button" href="/xyz-101/">Thank You</a> </div> 

Answer 4

<style>
.feature_home{
background-image:url("http://2.bp.blogspot.com/-biBlhcDYdZI/ULjLQeeCwzI/AAAAAAAAAmo/T9M9YTcMeWY/s400/BackgroundPanel.pngg");
background-repeat:no-repeat;
padding-left:25px;
padding-right:25px;
height:200px;
width:321px;
position:absolute;
  }
.feature_button{
color:white;
position:absolute;
right:30px;
  }
</style>

<div class="feature_home">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
</div>

Use position:absolute; http://www.w3schools.com/css/css_positioning.asp

Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is :

This should be enough to get you started. I would not use an actual img. You would be better assigning the image as the background of your feature_home div. See the css background-image.

if you have to use the img then you will need to use z-index to position the elements in layers with the image set below all of the other items.