Position text on the right of an image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Position

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text Position

Description

Position text on the right of an image

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.banner {<!--from w ww  .j a  v a  2 s .c o  m-->
   width:100%;
   text-align:right;
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
   background-size:100%;
   background-position:66% 36% ;
   padding-top:201px;
}

.herotext {
   bottom:21px;
   font-family:'museo_slab501';
   font-size:151%;
   color:Chartreuse;
   padding:0 21px;
   width:41%;
   line-height:151%;
   background:yellow;
   background:blue;
}
</style> 
 </head> 
 <body> 
  <div class=" continer banner"> 
   <div class="herotext"> 
    <h3>Lorem ipsum</h3> 
    <p>Lorem ipsum dolor sit amet, conse<br>Lorem ipsum dolor sit amet, consectetur adipiscing el</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials