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:

enter image description here


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


    CSS Howto..

    CSS - How to target Second Child List Items?

    How to avoid bloating pages with divs?

    How to programmatically download all contents of webpage, not only the source code in Java

    CSS: How to get browser scrollbar width? (for :hover {overflow: auto} nice margins)

    How do I get the height of a textarea

    How to align 3 child div in a parent div

    How to CSS select all cells with colspan set?

    How to remove space between list items in navigation (HTML / CSS)

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    How to change font on css?

    How to add CSS reference link to local HTML files in folder?

    CSS How to add content under fixed position navbar [closed]

    Are where any examples available on how to use postcss-modules instead of css-modules?

    How to create a rounded rectangle shape Css?

    How to fix a double click on a jQuery slide up/down animation?

    How do you get the width of an element without a defined width?

    How do I fix an HTML panel to the page after it hits the top of the viewport?

    How do I convert HTML to inline CSS in Google AppEngine?

    How to call multiple classes of CSS in a single class?

    How would I name this HTML code so I could edit it with CSS? [closed]

    How to use same css for separate media query conditions

    How to target table with ID?

    transition ease-out, right to left, how?

    css - how to hide href link nested inside a div?

    Given the following HTML and CSS how can I get the input elment to fill the width of its parent?

    How to save css style after hover action

    How to add image and change visibility on hover CSS

    how to use css to style a descendant (not a direct child) of an element?

    How to uniformly darken colors?

    How do I fill up the remainder of a div with another div?