背景画像のHTML要素の位置を修正する方法

Question

スクリーンサイズに関係なく、CSSで設定した背景画像の特定の場所にイメージとリスト要素を固定しようとしています。私はブートストラップを使ってページを2つの列に分け、2つの 'プロファイル'を作成しています。それぞれのプロファイルの中で、私は2つの列でページを再び分割して、プロフィール画像の各プロフィールとテキスト項目のリストを分割します。

私が今知っていることはすべて試しましたが、これは現時点での私のコードです。それはまだ動作しませんが、おそらく誰もそれを動作させるためにいくつかの微調整を提案することができますか？ This is what I am trying to achieveおよび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; 
} 

任意の助けいただければ幸いです！私はまだそう

Answer 1

要素を配置する多くの方法があります:-)魚にする方法を教えてください、学んでいますが、理由はあなたのオーバーフローの懸念：

これは構造体である私は

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

を使用します

私はあなたのコンテナの背景をイメージにします（また、背景のプロパティを使用してフォーマットして、画面に合わせて縮尺する）。

その後、私は、リストのマージンを決定するための）（計算値を使用し、（ブートストラップは、画面の幅に基づいているため）VWユニットを使用

でしょうあなたのリストの場合に行くので、私は相対的な絶対位置を避けるだろう長すぎると、オーバーフローします。

Example

Answer 2

このコードを試してください：

<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>