HTML과 CSS의 이미지 배치

Question

나는이 포럼을 처음 접했고 웹 디자인을 처음 접했지만 사이트를 만들어야하고 html과 css를 사용하여 특정 레이아웃을 코딩하는 방법을 알 수 없다.

Dreamveawer CC를 사용하고 있습니다. 전체 화면을 채울 필요가있는 배경 이미지가 있습니다. 이를 위해 나는 코드를 사용하고 있습니다 :

html {background: url(images/bgimg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
    background-size: cover; 
} 

을 나는 화면 크기와 아래로 축소 이미지를 필요로하는 즉, 작동하는 것 같군 - 사이트가 반응 할 등 태블릿 및 모바일보기에 적합 할 필요가로

내가 겪고있는 문제는 실제로 화면에 흩어져 있어야하기 때문에 화면 크기에 반응하고 태블릿보기의 배경 이미지와 함께 축소해야하기 때문에 실제로 이미지입니다. 모바일보기의 경우 이미지는 아이콘 크기로 바뀌고 행으로 정렬됩니다.

이미지를 원하는 위치에 정확하게 배치하고 화면 크기와 함께 태블릿 크기까지 이동 및 축소시키는 방법을 모르겠습니다.

은 내가 사용하여 컨테이너를 만든 :이 중 하나 올바른 크기 인 경우

<div class="Container"></div> 


.Container { 
height: 800px; 
width: 100%; 
margin: 10px auto; 
background: #5780E8; 
} 

모르겠어요. 하지만 그것은 화면 크기로 작동하는 것 같습니다. 이 컨테이너 안에 이미지를 넣을 거라고 생각 했어.

예 이미지 :

Answer 1

사용 background-position 속성은 당신의 필요에 따라 이미지를 배치합니다. 뷰포트 변경시 이미지의 크기를 조정하고 싶으므로이 목적으로 배경 이미지를 사용하는 것은 좋지 않다고 생각합니다.

1. 이미지에 <img> 태그를 사용해보세요.
2. <source> 태그 안에 이미지를 사용하여 뷰포트를 기반으로 여러 이미지를 전환하십시오.
3. 콘텐츠 상단에 콘텐츠가 있으면 절대 게재 위치로 지정할 수 있습니다.