How to Show Image in Right Side of Text Box Instead of Left Side

how to show image in right side of text box instead of left side

In CSS that would be:

background-position:right;

This looks like a usability problem though. If you're going to make a textbook look like a dropdown/combobox, users are going to expect it to behave like a combobox (like, being able to click the arrow and choose something). Are you going to be implementing some kind of JavaScript or clickable feature? If it's going to be a standard textbox I recommend avoiding any confusion with other control/input types.

aligning the image on the right side of text box

try

fieldset input {
  float:left;
}

maybe you also need to set the input to inline or inline block if you have set it to block previously.

http://jsbin.com/akiviw/1/edit

or change js

$('#login_id_correct').css('display','block')

$('#login_id_correct').css('display','inline-block')

Position text box over image

Here my solution, Open snippet in fullscreen mode

Add this to your .card content css

position: absolute;
right: 10px; /*change this to left for left alignment*/
width: 230px;
background: rgba(0, 0, 0, 0.5);
top: 10px;
bottom: 10px;

Add this in your media query ( @media (min-width: 768px) {) to place the button at the bottom

.blue-button {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    margin: 0!important;
  }

/* Card and Button */
body {  background-color: #f5f5f5;}
div {  background-color: #fff;}
.index-content a:hover {  color: black;  text-decoration: none;}
.index-content .row {  margin-top: 20px;}
.index-content a {  color: black;}
.index-content .card {  background-color: #FFFFFF;  padding: 0;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);}
.index-content .card:hover {  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);  color: black;}
.index-content .card img {  width: 100%;  border-top-left-radius: 4px;  border-top-right-radius: 4px;  height: 350px;}
.index-content .card h4 {  margin: 20px;}
.index-content .card p {  margin: 20px;  opacity: 0.65;}
.index-content .blue-button {  width: 100px;  -webkit-transition: background-color 1s, color 1s;  /* For Safari 3.1 to 6.0 */  transition: background-color 0.5s, color 0.5s;  min-height: 20px;  background-color: #4CAF50;  color: #ffffff;  border-radius: 4px;  text-align: center;  font-weight: lighter;  margin: 0px 20px 15px 20px;  padding: 5px 0px;  display: inline-block;}
.index-content .blue-button:hover {  background-color: #dadada;  color: #002E5B;}

/* Set width between block elements */
.small-padding.top {  padding-top: 10px;}
.small-padding.bottom {  padding-bottom: 10px;}
.small-padding.left {  padding-left: 5px;}
.small-padding.right {  padding-right: 5px;}
.row [class*="col-"] {  padding-left: 5px;  padding-right: 5px;}

/* Set full width on columns */
@media (max-width: 768px) {  .img-responsive {    width: 100%;  }}

/* GRID ELEMENTS MEDIA QUERIES */
@media (min-width: 768px) {  .card {    position: relative;  }  .card-content {    position: absolute;    right: 10px;    width: 230px;    background: rgba(0, 0, 0, 0.5);    top: 10px;    bottom: 10px;  }  .card-content h4,  .card-content p {    color: white;    width: 100%;    float: left;    margin: 0 0 5px;  }  .card-content a {    float: right;  }  .index-content .card h4,  .index-content .card p {    padding: 15px 20px;    margin: 0;  }  .index-content .card p {    padding: 0 20px 15px;    margin: 0;  }  .blue-button {    position: absolute;    bottom: 15px;    left: 50%;    transform: translateX(-50%);    display: block;    margin: 0!important;  }}
.margin_bottom {  margin-bottom: 10px;}
.row [class*="col-"] {  padding-right: 5px;  padding-left: 5px;}
.row {  margin-left: -5px;  margin-right: -5px;}
.card-img-bottom {  color: #fff;  height: 20rem;  background: url(images/img1.jpg) center no-repeat;  background-size: cover;}
.img-responsive {  height: 100%;}

<!DOCTYPE html><html lang="en">
<head>  <title>BMW TEMPLATE</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">    <!-- Full width Banner -->    <div class="row">      <a href="#">        <div class="col-md-12 small-padding top bottom">          <div class="index-content">            <div class="card">              <img src="http://placehold.it/1200x500"></img>              <div class="card-content">                <h4>BMW Summer 2018</h4>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>                <a href="#" class="blue-button">Læs Mere</a>              </div>            </div>          </div>        </div>      </a>    </div>  </div></body>
</html>

How do i make text visible in right side of a box

you can create a div that contain all text and set its position:absolute ;then position it as you wanted using right and top property.

.rcorners1 {
  border-radius: 70px;
  /* background: #73ad21; */
  background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?t=st=1652835318~exp=1652835918~hmac=a388e1f2f27925587acc85600e642cc8b312a7e7e4b957e9b73a7b636f7dd68d&w=900);
  padding: 20px;
  /* flex: auto; */
  width: 950px;
  height: 250px;
}

.rcorners2 {
  border-radius: 25px;
  background: white;
  border: 1px solid brown;
  /* border: brown; */
  /* background-image: url(./images/Background.jpg); */
  padding: 20px;
  /* float: none; */
  /* position: absolute; */
  margin-top: -150px;
  /* flex: auto; */
  width: 800px;
  height: 400px;
}

.text {
  color: white;
}

/* .leftWrapper {
  float: left;
  width: 32%;
  height: 650px;
} */

.container {
  position: relative;
}
.image1 {
/*   position: fixed; */
  width: 260px;
  padding: auto;
  height: 380px;
  margin: 1px;
  /* padding: 4px; */
  border: 4px solid white;
  margin-left: -200px;
  outline-style: groove;
  outline-color: brown;
  z-index: 3;
}

.image2 {
  /* position: absolute; */
  border: 4px solid white;
  width: 220px;
  height: 320px;
  top: 30px;
  left: 30px;
  /* padding: auto; */
  outline-style: groove;
  outline-color: brown;
  /* outline-width: 12px; */
  /* border: 1px green solid; */
  margin-bottom: 38px;
  margin-left: -100px;
  z-index: 2;
}

.image3 {
  width: 150px;
  /* position: relative; */
  outline-style: groove;
  border: 4px solid white;
  /* outline-color: brown; */
  height: 220px;
  top: 30px;
  left: 30px;
  padding: auto;
  z-index: 3;
  margin-bottom: 100px;
  margin-left: -100px;
}

.inner-text{
  color:black;
  position:absolute;
  right:0;
  top:50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <center>
    <div class="rcorners1">
      <div class="text">
        <h1>Digital Card Details</h1>
      </div>
    </div>
    <div class="rcorners2">
      <div class="container">
        <img class="image1" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />

        <img class="image2" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />

        <img class="image3" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />
        
        <div class="inner-text">
          text here
        </div>
      </div>
      <!-- <a href=""></a> -->
    </div>
  </center>
</body>

</html>

Making a Input Text Field Be On The Right Side Of a Image

Position absolute gives you more control:

HTML

<div name="image_input">
    <img src="missing-image.png" />
    <input type="text" />
</div>

CSS

div {
    position:relative;
}

input{
    position:absolute;
    right:10px;
    bottom:20px;
}

HTML CSS Picture with a text box on the side

You can Add the following lines, You had a smaller Image and changed the Background size also. the image was laying behind the Div so just set it to the right side. Here is the Code.

.theBox2 a img {

    float: right;

}

.txtBox2{
    position: absolute;
    height: 244px;
    width: 175px;
    background:url('http://i.imgur.com/sGWRvSp.png?1');
    background-size: 420px;
    bottom: 0; 
    left:0px;

}

How to Show Image in Right Side of Text Box Instead of Left Side