Create text inside an image

Question

I want to make text in an image. I have tried to follow the rules in w3school but it did not show satisfactory results

This is the final result shown:

The following code below is the LESS code that was created:

body {
  background: url("../img/background-blur-5px.jpg") no-repeat top right fixed;
  .container{
    position: relative;
    .img-bg {
      margin: auto auto;
      display: block;
      width: 70%;
      position: relative;
      @media screen and (max-width: 768px){
        display: none;
      }
    }
    .login-box{
      position: absolute;
      text-align: center;
      @media screen and (max-width: 768px){
        background: white;
        width: 90%;
        height: 30em;
        margin: 2em 0;
        padding: 1em;
      }
    }
  }
}

This is the HTML code that was created:

<div class="container">
  <img src="{{url('image/sbopays')}}/login-box.png" class="img-bg">
  <div class="login-box">
    Hello World
  </div>
</div>

And this is the desired expectation:

What am I forgot so I can add it later?

score 1 · Answer 1 · edited Dec 18 '18 at 18:08

1

CSS positioning will be the right solution for your expectation. As per the position rule, the parent container should have position: relative and child tag should have position:absolute.

Now you have applied relative to the image tag instead of the div tag. please check this link to know about CSS positioning method. Link

.container{position:relative;}

if you have any doubt please let me know.

edited Dec 18 '18 at 18:08

stealththeninja

3,576
1
26
44

answered Dec 17 '18 at 04:39

Sivaprakash D

318
1
4
17

I already use CSS positioning and it finally worked with further explanation on my answer – Ryuujo Dec 17 '18 at 05:00

Ryuujo · Accepted Answer · 2018-12-19T05:11:15.120

I got the final answer. My code was right, but with one step further, I just need more positioning with left right top and bottom style:

.login-box{
   position: absolute;
   top: 3em;
   left: 54%;
   right: 20%;
   text-align: left;
   @media screen and (max-width: 768px){
       background: white;
       position: relative;
       top: 0;
       left: 0;
       width: 90%;
       height: 30em;
       margin: 2em 0;
       padding: 1em;
       }
}

Final Result:

score 0 · Answer 3 · answered Dec 17 '18 at 04:36

0

The container position should be relative if the content inside is absolute:

.container {
  position: relative;
}

answered Dec 17 '18 at 04:36

Miguel Mota

20,135
5
45
64

@MirukuSheki post a jsfiddle link to help you better – Miguel Mota Dec 17 '18 at 04:42
I tried to post it to jsfiddle, but I can't upload the images – Ryuujo Dec 17 '18 at 04:47

Create text inside an image

3 Answers3