Question 44087 in Html Question posted in
Some basic documentation can be found here.

How can you put a text inside an image with CSS and HTML?

I have a problem when placing the price value inside a background image since I am aligning everything to the right side but I can’t get it to fit perfectly. I’m still new to CSS and HTML so any advice will help me improve these skills.

This is the code I’m using:

<!DOCTYPE html>
<html>

<head>
    <title>My Page</title>
    <style type="text/css">
        body {
            background-image: url('https://www.example.com/background-image.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .postR {
            display: flex;
            flex-wrap: wrap;
            height: 350px;
            width: 700px;
        }

        .postR>div {
            display: flex;
            flex-direction: column;
            flex: 1 1 0%;
        }

        .postR img {
            height: 320px;
            width: 320px;
        }

        .postR>div:last-child>div:last-child {
            text-align: right;
            background-image: url('https://cdn-icons-png.flaticon.com/512/401/401434.png');
            background-repeat: no-repeat;
            background-size: 100px;
            background-position-x:-200%;
            background-position: right;
            color: white;
            padding: 40px;
        }

        .postR>div:last-child>div:last-child>h1 {
            margin: 0;
        }

        .postr h1 {
            color: red;
            text-align: right;
        }
    </style>
</head>

<body>

    <div class="postR">
        <div>
            <div>
                <a href="https://i.ibb.co/NZXX3Pv/product.jpg">
                    <img data-original-height="920" data-original-width="920" src="https://i.ibb.co/NZXX3Pv/product.jpg" />
                </a>
            </div>
        </div>
        <div>
            <div>
                <b>amount | brand</b>
            </div>
            <div>
                <b>Descripción:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div>
                <h1 class="price">$ 35.00</h1>
            </div>
        </div>
    </div>
</body>

</html>

The result is the following and as you can see the price is out of the image and I would like it to be in the middle.

enter image description here

Tags:

2

Answers


  1. 0

    Your div padding is the reason the price won’t go all the way to the right. Change this line in your CSS:

    padding: 40px;

    Change it to this instead, which will set the padding on the right-hand side to zero:

    padding: 40px 0 40px;
    Login or Signup to reply.
  2. 0

    Add the following ruleset to your styles:

    .price {
  position: relative;
  left: 40px;
}

    Basically, you’re pushing the price to the right, by moving it away from the left (that’s why you’re seeing left).

    Full code to run:

    <!DOCTYPE html>
<html>

<head>
  <title>My Page</title>
  <style type="text/css">
    body {
      background-image: url('https://www.example.com/background-image.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .postR {
      display: flex;
      flex-wrap: wrap;
      height: 350px;
      width: 700px;
    }

    .postR>div {
      display: flex;
      flex-direction: column;
      flex: 1 1 0%;
    }

    .postR img {
      height: 320px;
      width: 320px;
    }

    .postR>div:last-child>div:last-child {
      text-align: right;
      background-image: url('https://cdn-icons-png.flaticon.com/512/401/401434.png');
      background-repeat: no-repeat;
      background-size: 100px;
      background-position-x: -200%;
      background-position: right;
      color: white;
      padding: 40px;
    }

    .postR>div:last-child>div:last-child>h1 {
      margin: 0;
    }

    .postr h1 {
      color: red;
      text-align: right;
    }
    .price {
      position: relative;
      left: 40px;
    }
  </style>
</head>

<body>

  <div class="postR">
    <div>
      <div>
        <a href="https://i.ibb.co/NZXX3Pv/product.jpg">
          <img data-original-height="920" data-original-width="920" src="https://i.ibb.co/NZXX3Pv/product.jpg" />
        </a>
      </div>
    </div>
    <div>
      <div>
        <b>amount | brand</b>
      </div>
      <div>
        <b>Descripción:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div>
        <h1 class="price">$ 35.00</h1>
      </div>
    </div>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search