Photoshop Question posted in
The official user guide can be found here.

How to place a text box over an image and make it stay in place when page is being resized – Photoshop

I feel like this may be a bit of a basic question, but I’m rusty, so I figured I’d ask:

I have an image and I need to put text boxes over the image and place the text boxes in specific areas

I know how to create text boxes and move them on top of the image, but the text boxes move around to different locations of the image when I resize the page. What is the best way to make these text boxes responsive and stay aligned with image (almost as if the text boxes were Photoshopped onto the image)

Here is my code:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap');

#wrapper {
  position: relative;
  overflow: hidden;
}

img.background {
  width: 80%;
} 

/*Adventureland */
 #label-1 {
  background-color: #4a9a37;
  width: 210px;
  height: 40px;
  padding: 5px;
  position:relative;
  left:80px; top:-700px;
  color: white;
  text-align: left;
 
}

.title-1 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  float: left;
  text-transform: uppercase;
  position: relative; top: -10px; 
  
}

/*Fantasyland */
#label-2 {
  background-color: orange;
  width: 210px;
  height: 40px;
  padding: 5px;
  position:relative;
  left:450px; top:-1070px;
  color: white;
  text-align: left;
 
} 

.title-2 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  float: left;
  text-transform: uppercase;
  position: relative; top: -25px; 
  
}
<div id="wrapper">
  <img src="https://tripadvisor.com/img2/solutions/ekedit.jpg" class="background">

  <!--  Adventureland Start-->
  <div id="label-1">
    <p class="title-1"> <strong> ADVENTURELAND </strong> </p>
   
    
    </div>

<!--  Adventureland End -->

  <!--  Fantasyland Start-->
  <div id="label-2">
    <p class="title-2"> <strong> Fantasyland </strong> </p>
      
   

<!--  Fantasyland End -->

</div>
Tags:

2

Answers


  1. 0

    Setting to "label-1" the position absolute, top, and left with % values would be one solution but still, the text box won’t be super responsive in a different screen resolution. What I suggest is to create the image as an image map; place your text and using an online image map generator you can create areas (this method helps you to create clickable text boxes by redirecting you to another page/tab etc). The image will then be responsive because is treated as a solo image.
    Another way to make a responsive page in different screen resolutions and/or odd resolutions is to make the image as a .svg and add those text boxes inside the .svg as or elements. Then add the svg inside your HTML by using:<object data="~/yourPathHere.svg" type="image/svg+xml"></object>

    Login or Signup to reply.
  2. 0

    This solution uses % values for left and top as was suggested in another answer. The big downfall with this is that it does not scale the size of the label.

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap');
#wrapper {
  position: relative;
  overflow: hidden;
}

img.background {
  width: 80%;
}


/*Adventureland */

#label-1 {
  background-color: #4a9a37;
  padding: 5px;
  position: absolute;
  left: 6%;
  top: 48%;
  color: white;
  text-align: left;
}

.title-1 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin:0;
}


/*Fantasyland */

#label-2 {
  background-color: orange;
  padding: 5px;
  position: absolute;
  left: 28%;
  top: 7.5%;
  color: white;
  text-align: left;
}

.title-2 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin:0;
}
    <div id="wrapper">
  <img src="https://tripadvisor.com/img2/solutions/ekedit.jpg" class="background">

  <!--  Adventureland Start-->
  <div id="label-1">
    <p class="title-1"> <strong> ADVENTURELAND </strong> </p>
  </div>

  <!--  Adventureland End -->

  <!--  Fantasyland Start-->
  <div id="label-2">
    <p class="title-2"> <strong> Fantasyland </strong> </p>
  </div>



    <!--  Fantasyland End -->

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

Back To Top
Search