Text Block and image over a image - html

Question

I want to get result as shown in picture one but when I am coding it shows as I want by setting up margin left and right on images. It shows same result on some resolutions but not friendly in all resolution. I need a resolution friendly layout, please tell me how can i achieve this:
My code is
/* Slider */
.slider-bg {
background-image: url("http://www.design.earnandearn.com/zx-content/themes/default/media/img/grownstar-custom/slider_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
border-bottom: 6px solid #E1B706;
height: 415px;
}
.container {
height: 415px;
max-width: 1030px;
margin: 0 auto;
}
.man {
height: 415px;
width: 542px;
background-image: url(http://www.design.earnandearn.com/zx-content/themes/default/media/img/grownstar-custom/man.png);
background-repeat: no-repeat;
position: absolute;
display: block;
right: 0;
}
.sliderright {
float: left;
height: 344px;
}
.sliderright h3 {
font-size: 39px;
color: #6e8d30;
margin-top: 60px;
}
.sliderright h2 {
color: #7b33ad;
font-size: 48px;
font-weight: 600;
}
.sliderright p {
font-size: 30px;
margin-top: 20px;
line-height: 1;
margin-bottom: 15px;
}
.sliderright a.btn {
background: none repeat scroll 0 0 #bae23d;
color: #000;
text-shadow: 0 1px 1px #000000;
font-size: 18px;
font-weight: 600;
margin-top: 15px;
margin-left: 0;
border: none;
width: 150px;
}
.sliderright small {
display: block;
}
<div class="slider-bg">
<div class="container">
<div class="sliderright">
<h3>Making Your Extra Money with</h3>
<h2>Our Social Network</h2>
<p>
<small>Achieve your dream for the financial freedom !</small>
Earn money Anywhere and Anytime
</p>
<a class="btn btn-warning" href="register.php">Signup Now !</a>
<div class="man"></div>
</div>
</div>
</div>

Answer 1

Just add top: 0; to your class ".man".
Like:
.man {
height: 415px;
width: 542px;
background-image: url(../img/grownstar-custom/man.png);
background-repeat: no-repeat;
position: absolute;
display: block;
right: 0;
top: 0,
}
Tipp: If you put the image with an <img> tag right into your .man div you don't need any height and width settings. The img will stretch it automatically.
And you should not name the class "man". Its not a man... Its a woman, I think.

Answer 2

Try this:-
<div class="slider-bg">
<div class="container">
<div class="sliderright">
<h3>Making Your Extra Money with</h3>
<h2>Our Social Network</h2>
<p>
<small>Achieve your dream for the financial freedom !</small>
Earn money Anywhere and Anytime
</p>
<a class="btn btn-warning" href="register.php">Signup Now !</a>
</div>
<div class="man" style="float:right;margin:-21px 6px 2px 9px;"></div>
</div>
</div>
Set your image manclass div out from the sliderrightclass div and give a margin to it.
See :- JSFiddle1
Update 1:-
Set propertyposition: relative; for both .container and .sliderright classes. See this updated code JSFiddle2.
Hope this will help you!