how do I position text on the right of an image?

Question

That means inside the image but on the right section. The image is on the screen. The text should be in the right part.

So far my code is like this:

 .banner{ width:100%; background-image: url(../img/kepmerli2.jpg); background-repeat: no-repeat; background-size: 100%; background-position: 65% 35% ; padding-top: 200px; } .herotext{ bottom: 20px; font-family: 'museo_slab500'; font-size: 150%; color: #fff; padding: 0 20px; width: 40%; line-height: 150%; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); } 

 <div class=" continer banner"> <div class="herotext"> <h3 >Marine Vila</h3> <p>This is Kep Merli Marine Villa, </br> a living space redeffing design tandarts in Albania </p> </div> </div> 

Answer 1

Add text-align: right; to .banner

 .banner{ width:100%; background-image: url(../img/kepmerli2.jpg); background-repeat: no-repeat; background-size: 100%; background-position: 65% 35% ; padding-top: 200px; text-align:right; } .herotext{ bottom: 20px; font-family: 'museo_slab500'; font-size: 150%; color: #fff; padding: 0 20px; width: 40%; line-height: 150%; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); } 

 <div class=" continer banner"> <div class="herotext"> <h3 >Marine Vila</h3> <p>This is Kep Merli Marine Villa, </br> a living space redeffing design tandarts in Albania </p> </div> </div> 

Answer 2

Apply text-align: right; to the banner .

http://jsfiddle.net/5y6v1o35/

Answer 3

Add text-align: right; and float: right; to the herotext: http://jsfiddle.net/yeyp7sfk/1/

Answer 4

Add following to .herotext:

position:fixed;
right:0px;
top:0px;

Play around with top to position it correctly.

Answer 5

try this : http://jsfiddle.net/Lxrsmj25/

<div class=" continer banner">
   <div class="herotext"> 

      <h3 >Marine Vila</h3>
      <p>This is Kep Merli Marine Villa, </br>  a living space redeffing design tandarts in Albania </p> 
     </div> 
   </div>.banner {
    background-image: url("http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2013/09/3017047-poster-1280-google.jpg");
    float: left;
    height: 400px;
    width: 100%;
}

.herotext {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: 20px;
    color: #fff;
    float: right;
    font-family: "museo_slab500"; 
    line-height: 50%;
    padding: 0 20px;
    position: absolute;
    right: 0;
    top: 0;
    height:150px;
    width: 40%;
}

Answer 6

Try this updated JSFIDDLE

.banner{
   width:100%;
   background-image: url(http://www.crazymonkeydefense.com/wp-content/uploads/2014/03/black-hd-background-background-wallpapers-abstract-photo-cool-black-background.jpg); 
   background-repeat: no-repeat;
   background-size: 100%; 
   background-position: 65% 35% ;   
   padding-top: 200px;
   overflow: hidden;
}

.herotext{
    float: right;
    font-family: 'museo_slab500';
    font-size: 150%;
    color: #fff;
    padding: 0 10px;
    width: 40%;
    line-height: 150%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}

Just add text-align: right; if you want to align text right