5

How do I make it so that when the image resizes, the text stays in the same position relative to the image when it resizes. Here is what is happening currently:

Full screen view:

enter image description here

Resized:

enter image description here

The text does not stay in the same place when the image went smaller, How do I make the text stay in the same place (under the line that points to it) when the image resizes?

Relevant code: HTML:

<div id="BG1">
        <div id="BG2">
<div id="slide1">
    <p1>Choose<br>
        your<br>
        Route</p1>
    <p2 id="Tongariro">Tongariro</p2>
<img src="img/NZ6.png" id="NZi2" >   
    </div>
    </div>
    </div>

CSS:

* {
    margin:0;
    padding: 0;
    }
slide1, #slide2{ width: 100%; } 

#slide1{
    height: 600px;
    margin: 0;
    padding: 200px 0 260px 0;
}
#BG1{
    background: url("../img/IMG_3708.jpg");
    background-size: cover;

    }
#BG2{
    background-color: rgba(103, 128, 159,0.79);
}
#Tongariro{
position: relative;
top:27%;
left:34%;
font-size:40px;
}
#NZi{
    width:35%;
    display:block;
    clear:both;
    margin: 0;
    position: absolute;
    z-index: 0;
    top: 55%;
    left: 60%;
    transform: translate(-50%, -50%) ;
    }
Vidya Sagar
  • 1,699
  • 3
  • 17
  • 28
user3459426
  • 81
  • 1
  • 6
  • If the text need to be remain the same over time, you should edit the image via photoshop or any image editing software and add this text at your desired position. In that way you do not need to write any extra code. – Tarun Mahashwari Aug 16 '15 at 12:03
  • @TarunMahashwari I disagree with this method, although it will work. The reason is, it's a [q&d](http://programmers.stackexchange.com/questions/124835/how-do-quick-dirty-programmers-know-they-got-it-right) temporary coverup - for example, if he needs to squeeze more text in, he might need to resize the image - and with enough content to resize, no image size will be valid. – A. Abramov Aug 16 '15 at 12:07
  • Please read the first line of my previous comment. **If the text need to be remain the same over time** – Tarun Mahashwari Aug 16 '15 at 12:11

1 Answers1

0

You're defining the distance by px - that means, even if the window resizes, the distance stays the same - it's a fixed number of pixels, thus not relative to the window size.

A better unit would be % - i.e,

#slide1
{
height: 30%;
margin: 0;
padding: 10% 0% 12% 0%;
}

This way, the distance will be relative to the screen size, and if you adjust the numbers correctly, everything will stay in the position you want it to - window full, or resized.

Read more! :)

Community
  • 1
  • 1
A. Abramov
  • 1,823
  • 17
  • 45