Question

In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:

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

Then, I added some text over that image with these style properties:

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

And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366×768 resolution.

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

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

Answer 1

Set the distance from the bottom, not from the top. Or set it in %.

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

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

In the second case, they are in % and change on resizing the browser window.

Basically, the rules that do the trick are

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

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

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

in the second case (percentage).

Also, please note that you don’t need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.

---

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

For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body 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 resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I’ve linked to. You can simply remove the content below the image if you don’t need it.