How to save text over a huge image in the correct position in all resolutions?

Question

On my input page, I have a really large image in height and width to fit all resolutions (over 4000 pixels in width), and I set it as below:

#source-image { width: 100%; position: absolute; top: 0; left: 0; } 

Then I added text above this image with these style properties:

 .description { position:absolute; top:510px; left:23px; width:340px } 

And it looks right (and as I want it to show) on my 15.6-inch laptop with 1366x768 resolution.

However, when my roommate saw him on a high-resolution monitor, the description was not in the “right” position. Of course, I understand why this is happening.

My question is, how can I dynamically maintain the correct position of the description text in all resolutions? Thank you very much.

Answer 1

Set the distance from below, not from above. Or set it to%.

EDIT . I applied one of my experiments to an example: http://dabblet.com/gist/2787061 The description position is set relative to the bottom and left image container (the image fills its entire container).

In the first case, the distances to the left and bottom image container are fixed in px.

In the second case, they are in% and change when the browser window is resized.

Basically, the rules that do the trick,

 figcaption { bottom: 5px; left: 23px; /* more rules here */ } 

in the first case (fixed distances, in px) and

 figcaption.perc { left: 10%; bottom: 17%; } 

in the second case (in percent).

Also note that you do not need position: absolute or set the top and left properties for the image. However, you need to set position:relative in the parent description box.

---

For the image to fill the screen horizontally, you need to have margin:0; and padding:0; for the body element and width: 100%; and margin: 0; for a picture element. I edited my example to reflect these changes http://dabblet.com/gist/2787061

In order for the image to fill the screen both horizontally and vertically, the easiest way is to not even use the img tag, but simply set the image as a background image for the body and set the height for both html and the body of the elements to 100% - example http://dabblet.com/gist/2792929

Be careful for two reasons: one, this will really distort the image and can make it look ugly when you resize the browser window, and two, if you need some content below the image, you will need to provide an external position: absolute element and set its top: 100% Both of these aspects can be seen in the example to which I am attached. You can simply delete the content below the image if you do not need it.

Answer 2

use position:relative; for a div that wraps the image, and position:absolute; for text div

Answer 3

indicate percentage

check the example description window in the horizontal center,

first set relative position relative to wraper div

 .description { position:absolute; top:510px; left:50%; width:340px; margin:0 0 0 -170px }