Text and button on top of background image - html

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

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 2

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 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.