Wie behebt man HTML-Elemente Positionen auf background-image

Question

Ich versuche, ein Bild und ein Listenelement an einer bestimmten Stelle auf einem Hintergrundbild zu fixieren, das ich in meinem CSS eingestellt habe, unabhängig von der Bildschirmgröße . Ich verwende Bootstrap, um die Seite in zwei Spalten zu teilen, um zwei "Profile" zu erstellen. Innerhalb jedes Profils teile ich die Seite wieder in zwei Spalten auf, um jedes Profil in ein Profilbild und eine Liste mit Textelementen zu unterteilen.

Ich habe alles versucht, was ich über jetzt weiß, und das ist mein Code im Moment. Es funktioniert noch nicht, aber vielleicht ist jemand in der Lage, bestimmte Verbesserungen vorzuschlagen, damit es funktioniert? This is what I am trying to achieve und 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; 
} 

Jede Hilfe wäre sehr dankbar! Ich lerne immer noch, so wenden Sie sich bitte mir beibringen, wie man Fisch :-)

Answer 1

Es gibt viele Möglichkeiten, ein Element zu positionieren, sondern wegen Ihrer Überlauf betreffen:

Das ist die Struktur würde ich

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

verwenden

Ich würde den Hintergrund Ihres Containers das Bild machen (und Hintergrundeigenschaften verwenden, um es so zu formatieren, dass es mit dem Bildschirm skaliert).

Dann würde ich calc() zur Bestimmung Margen für die Liste verwenden, und vw Einheiten verwenden (da Bootstrap auf Bildschirmbreite basiert)

ich da relativ absolute Positionierung vermeiden würde im Fall der Liste gehen Zu lange wird es überlaufen.

Example

Answer 2

Bitte versuchen Sie diesen 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>