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

Fix text on images using html and css

I wanted to add text to my images on website (so I can copy the text).
It’s mostly for mobile, so I added something that will not allow to copy images (before when I tried to hold on the etxt to copy it all it did was to copy/download the image). Any ways to fix it?

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Resetting default styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100%;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/* Add your styles for text fields and content layer here */

.content-layer {
  text-align: center;
  /* Center text horizontally */
  z-index: -15
}

.image-container {
  top: 180px;
  position: relative;
  max-width: 100%;
  height: auto;
}

.image-container img {
  scale: 0.9;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* Disable click events on the image */
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  text-align: center;
  user-select: text;
  /* Allow text selection */
  pointer-events: auto;
  /* Enable click events on the text */
}


/* General background layer styles */

.background-layer {
  position: absolute;
  width: 100%;
  height: 100%;
}

#bgsupportnewmobile_png {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background-image: url('../gifs/dmfmfd.png');
  background-repeat: no-repeat;
  background-size: contain;
  /* or specific values */
  background-position: center;
  z-index: -16;
}

#bgsupportnewmobiletlo_png {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1080px;
  height: 1920px;
  background-image: url('../gifs/mobilka.png');
  background-repeat: no-repeat;
  background-size: contain;
  /* or specific values */
  background-position: center;
  z-index: -17;
}
<div id="bgsupportnewmobile_png" class="background-layer"></div>

<div id="bgsupportnewmobiletlo_png" class="background-layer"></div>

<div id="content" class="content-layer">
  <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Your Image">
    
    <div class="text-overlay">
      Your Text Here
    </div>
  </div>
  
  <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Your Image">
    
    <div class="text-overlay">
      Your Text Here
    </div>
  </div>
  
  <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Your Image">
    
    <div class="text-overlay">
      Your Text Here
    </div>
  </div>
</div>
</div>

I tried to block copying the image so, pointer-events: none; but still cannot copy the text.

Tags:

2

Answers


  1. 0

    Simpler is usually better! This works just fine for me on mobile as well as computer.

    .container {
  position: relative;
  text-align: center;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <div class="container">
  <img src="https://hinicio.com/wp-content/uploads/2022/08/placeholder-3.png" alt="Your image" style="width:100%;">
  <h2 class="text">Your Text</h2>
</div>
    Login or Signup to reply.
  2. 0

    Set user-select: none; to img.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  display: flex;
  justify-content: center;
}

.content-layer {
  text-align: center;
}

.image-container {
  top: 180px;
  position: relative;
  max-width: 100%;
  height: auto;
}

.image-container img {
  scale: 0.9;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none; /* <--- */
}

.text-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  color: #ffffff;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  text-align: center;
}
    <div id="content" class="content-layer">
  <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Your Image">
    
    <div class="text-overlay">
      Your Text Here
    </div>
  </div>
  
  <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Your Image">
    
    <div class="text-overlay">
      Your Text Here
    </div>
  </div>
  
  <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Your Image">
    
    <div class="text-overlay">
      Your Text Here
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search