How to fix HTML-elements positions on background-image

Question

I am trying to get an image and a list-element to be fixed on a certain spot on a background-image that I have set in my CSS, regardless of the screensize. I am using bootstrap to divide the page in two columns to make two 'profiles'. Inside each profile I divide the page in two columns again to divide each profile in a profile-picture and a list with text-items.

I have tried everything I know about now, and this is my code at the moment. It does not work yet, but perhaps anyone is able to suggest certain tweaks to make it work? This is what I am trying to achieve and This is the image I am using .

HTML:

<div class="content row">
    <div class="col-sm-6">
        <div class="profile">
            <div class="profile-content">
                <p class="big profile-name">Some name</p>
                <div class="content row">
                    <div class="col-md-4 profile-img"><img src="./name.png"></div>
                    <div class="col-md-8"><ul><li>Web: HTML/CSS/PHP/JQuery</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="profile">
            <div class="profile-content">
                <p class="big profile-name">Some name</p>
                <div class="content row "></div>
                    <div class="col-md-4"><ul><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                    <div class="col-md-8"><ul><li>Web: HTML/CSS/PHP/JQuery</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                </div>
            </div>
        </div>
    </div>

CSS

.profile {
background-image: url('/screen-1315650.png');
background-repeat: no-repeat;
height: 400px;
background-size: 100%;
}

.profile-content {
padding: 40px 10px 0px 10px;
margin: 10% 10% 10% 10%;
overflow: hidden;
height: 45%;
}

.profile-img {
align-self: flex-start;
}

.profile-name {
font-weight: 600;
}

.content {
position: relative;
margin: auto;
width: 100%;
max-width: 1024px;
text-align: center;
padding: 0 10px;
}

Any help would be greatly appreciated! I am still learning, so please teach me how to fish :-)

Answer 1

There are many ways to position an element, but because of your overflow concern:

This is the structure I would use

<div id="container">
    <ol id="list"></ol>
<div>

I would make the background of your container the image (and use background properties to format it so it scales with the screen).

Then, I would use calc() for determining margins for the list, and use vw units (since bootstrap is based on screen width)

I would avoid relative absolute positioning because in the case of your list going too long, it will overflow.

Example

Answer 2

Please try this code:

<style>
    .profile {
        background: url('mac.png') no-repeat left center;
        height: 400px;
        background-size: 100%;
        position: relative;
    }

    .profile-content {
        position: absolute;
        top: 20%;
        left: 10%;
        right: 10%;
        z-index: 9;
        bottom: 0;
    }

    .content ul {
        margin:0;
        padding:0;
        list-style:none;
        text-align: left;
    }

    .profile-name {
        font-weight: 600;
    }

    .content {
        position: relative;
        margin: auto;
        width: 100%;
        max-width: 1024px;
        text-align: center;
        padding: 0 10px;
    }
</style>


<div class="content row">
    <div class="col-sm-6">
        <div class="profile">
            <div class="profile-content">
                <p class="big profile-name">Some name</p>
                <div class="content row">
                    <div class="col-md-4 profile-img"><img class="img-responsive" src="./name.png"></div>
                    <div class="col-md-8"><ul><li>Web: HTML/CSS/PHP/JQuery</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="profile">
            <div class="profile-content">
                <p class="big profile-name">Some name</p>
                <div class="content row "></div>
                    <div class="col-md-4"><ul><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                    <div class="col-md-8"><ul><li>Web: HTML/CSS/PHP/JQuery</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                </div>
            </div>
        </div>
    </div>