How to make sure Text always stays on top of Image (even when resizing)?

Tags: javascript,html,css,image,text

Problem :

SITUATION:

I have the following result for my Website:

---

PROBLEM:

I would like to add content on top of the iPad image so that the content is always "inside" the iPad's screen (even when resizing the window).

---

QUESTION:

How can achieve that ? I googled for solutions, none helped me. Is there some property to make a div snap to an image ?

---

CODE:

HTML:

<section class="Contact" id="Contact">
    <div class="row">
        <div class="col span-1-of-2" >
            <h2> Contact </h2>
        </div>
        <div class="col span-1-of-2 rightPage" >
            <img src="Vendors/Images/iPadContact.png" alt="Contact on iPad">
        </div>
    </div>
</section>

CSS:

section {
    height: 100vh;
    overflow: hidden;
    padding: 0%;
}

.rightPage {
    margin-top: 0%;
    height: 100vh;
    width: 50vh;
}

img {
    max-width: 100%;
    max-height: 95%;
    display: block;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    margin-left: 0;
}

---

Solution :

From what I understood you whant the text inside the iPad image. If that is the case try to set you'r image as background-image :

<section class="Contact" id="Contact">
    <div class="row">
        <div class="col span-1-of-2" >
            <h2> Contact </h2>
        </div>
        <div class="col span-1-of-2 rightPage" >
           Some Text ...
        </div>
    </div>
</section>

CSS.

.rightPage {
     background-image: url("Vendors/Images/iPadContact.png");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100vh;
    max-width: 517px;

}

Add the right image width to max-width