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

How to position text over an image based on the image's origin – Photoshop

I have an image that’s centered on the page like this:

enter image description here

I want to put paragraph text over each of the image texts. My first thought was to use position: absolute and position: relative. I used a div to wrap my image and all the text:

<div class="content-wrapper">
    <img src="SBDrawing.png" />
    
    <p id="D">D</p>
    <p id="d">d</p>
    <p id="H">H</p>
    <p id="D1">D1</p>
    <p id="D2">D2</p>
    <p id="n-dn">n-dn</p>
    <p id="n1">n1</p>
    <p id="d3">d3</p>
    <p id="DL">DL</p>
    <p id="dl">d1</p>
    <p id="H1">H1</p>
    <p id="h">h</p>
    <p id="b">b</p>
    <p id="Da">Da</p>
</div>

And used this CSS:

  .content-wrapper{ 
       position: relative;
       height: 100%;
       width: 100%;
  }
  
  p{
   position: absolute;
  }
 
  #D{
    top:220px;
    left:310px; 
  }
  
  #H{
    top:320px;
    left:180px;
    transform: rotate(-90deg);  
  }
  
  #D1{
    top:245px;
    left:260px; 
  }
  
  #D2{
    top:280px;
    left:55px;  
  }
  
  #n-dn{
    top:215px;
    left:80px;  
  }
  
  #n1{
    top:280px;
    left:200px;
    transform: rotate(-90deg);  
  }
  
  #D3{
    top:245px;
    left:5px;   
  }
  
  #DL{
    top:255px;
    left:30px;  
  }
  
  #dl{
    top:245px;
    left:260px; 
  }
  
  #H1{
    top:295px;
    left:180px; 
    transform: rotate(-90deg);
  }
  
  #h{
    top:35px;
    left:120px;
    transform: rotate(-90deg);  
  }
  
  #b{
    top:35px;
    left:185px;
    transform: rotate(-90deg);
  }
  
  #Da{
    top:215px;
    left:330px; 
  }

Only the top two styles matter, the rest if for positioning the text. FYI, the top and left values are supposed to refer to the origin of the image (top left corner of the image).

I imported the photo into Photoshop and used the Info tab to find the coordinates where every paragraph tag should go. I thought everything was fine, but no:

enter image description here

You can see that some overlap on each other, some are not even close to the image (look at footer). Can someone please find the problem? I’ll give you 15 rep! For accepting your answer…

Tags:

2

Answers


  1. 0

    1 – For you to position all of the elements and not have them move out of position, you need the image to not change size. the content-wrapper holding the image cannot use percentages for size since it will resize according to its parent element. Use a set width and height for the content-wrapper.

    2 – hard code measurements into the html using the largest measurement that could be displayed.

    3 – in your css, add text-align: right to the elements holding the measurements.

    4 – adjust the top and left numbers for each element until they are positioned where you want.

    5 – remove the hard coded measurement text from the html.

    Login or Signup to reply.
  2. 0

    Holy errors Batman!

    this:

    <p id="dl">d1<p>

    does not match css

         #D1{
    top:245px;
    left:260px; 
  }

    this:

     <p id="d3">d3<p>

    does not match

      #d3{
    top:245px;
    left:5px;
  }

    Try setting your wrapper to an fixed size currently you have:

    .content-wrapper{ 
       position: relative;
       height: 100%;
       width: 100%;
  }

    Sice all your <p> tags are an absolute value of a % it will not work correctly, instead set the width and height of the div to the same width and height of your img you are overlaying. (in px)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search