How can I add text to the bottom of the image?-CodePudding

I have a text {L U V B A G} that should appear under the image. I need the html and css for it. This is how it looks. enter image description here

{L U V B A G} that should appear under the image.

CodePudding user response：

If you want the text to be on top of your image but at the bottom you can use z-index like the comment says or you can use position absolute on your text.

Code below is adapted from : https://www.w3schools.com/howto/howto_css_image_text.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  font-size: 3rem;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div >
  <img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
  <div >Best Food 2022</div>
</div>

</body>
</html>

If you don't necessarily want your text on top of the image but rather separated and under your image you can just do two rows and use flexbox.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .flex-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  }
</style>
</head>
<body>
  <div >
    <img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
     <div>Best Food 2022</div>
  </div>
</body>
</html>

Hope that answered your question!

CodePudding user response：

Solution Explained

You'll have one parent div, and inside it, you'll have an image and the text. The text (i.e. <h2>) will have position: absolute with z-index: -1 to make it one layer down the image, and we will need to add position: relative to the parent to stick the <h2> absolute position to this parent.

The top: 15%; right: 50%; transform: translate(50%, -50%); are mainly used to position the absolute <h2> properly, horizontally centered with a little top percentage you can manipulate depending on the image.

Extras like letter-spacing was used to give a proper look & feel like the image you provided.

* {
  margin: 0;
  padding: 0;
}

.banner {
  position: relative;
  height: 500px;
  text-align: center;
}

.banner h2 {
  position: absolute;
  top: 15%; 
  right: 50%;
  transform: translate(50%, -50%);
  font-size: 10rem;
  letter-spacing: 20px;
  z-index: -1;
}

.banner img {
  height: 100%;
}

<div >
  <h2>LUVBAG</h2>
  <img src="https://www.pngall.com/wp-content/uploads/2016/04/Women-Bag-Transparent.png" alt="">
</div>