배경 이미지의 HTML 요소 위치를 수정하는 방법

Question

화면 크기에 관계없이 CSS에서 설정 한 배경 이미지의 특정 위치에 이미지와 목록 요소를 고정하려고합니다. . 나는 부트 스트랩을 사용하여 페이지를 두 개의 열로 나누어 두 개의 '프로필'을 만듭니다. 각 프로필 안에는 두 개의 열로 페이지가 다시 나뉘어 프로필 사진의 각 프로필과 텍스트 항목의 목록이 나뉩니다.

나는 지금 내가 아는 모든 것을 시도해 보았고, 지금은 내 코드이다. 아직 작동하지 않지만 어쩌면 누구나 작동하도록 특정 개조를 제안 할 수 있습니까? 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> 

을 사용

컨테이너의 배경을 이미지로 만들고 (배경 속성을 사용하여 화면에 맞게 크기를 조정할 수 있습니다). 목록의 경우 것 때문에

그럼 상대 절대 위치를 피할 것이다 I리스트 마진을 결정 CALC()를 사용하는 것, 및 (부트 스트랩 화면 폭에 기초하기 때문에)

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