[HTML / CSS] background image

들어가기 앞서

url, href, src의 차이를 짚어보고 가자.

href는 a태그에 홈페이지 등의 주소를 입힐 때 사용된다.

src는 img태그에 파일 디렉토리 경로에 있는 어떠한 이미지를 지성하여 웹 페이지에 결과물을 출력할 때 사용된다.

url: CSS / html의 style 에서 img태그와 같이 어떠한 파일을 불러올 때 사용한다.

 

<a href="https://www.naver.kr">네이버 바로가기</a>
 
<img src="../images/naver.png" alt="네이버 이미지"/>
    
<span style="background:url(../images/naver.png)"/>

 

외우기 쉽게 다음과 같이 적는다.

 

CSS에서는 항상 url

HTML에서 link인 경우 href

HTML에서 link가 아닌 이미지, 비디오같은 것일 경우 src

 

 

 

이미지를 반복할 것인지 아닌지 background-repeat

 

/* 반복하지 않음 */
background-repeat: no-repeat;

/* 가로 방향으로만 반복 */
background-repeat: repeat-x;

/* 세로 방향으로만 반복 */
background-repeat: repeat-y;

/* 가로와 세로 모두 반복 */
background-repeat: repeat;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */
background-repeat: space;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */
background-repeat: round;

 

 

이미지 사이즈를 정해주는 속성 background-size

 

/* 원래 이미지 사이즈대로 출력 */
background-size: auto;

/* 화면을 꽉 채우면서, 사진 비율을 유지 */
background-size: cover;

/* 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력 */
background-size: contain;

/* 픽셀값 지정 (가로: 30px, 세로: 50px로 설정) */
background-size: 30px 50px;

/* 퍼센트값 지정 (가로: 부모 요소 width의 60%, 세로: 부모 요소 height의 70%로 설정) */
background-size: 60% 70%;

 

배경 이미지의 위치를 정해주는 속성

 

/* 아래와 같은 총 9개의 조합이 가능 */
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;

/* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */
background-position: 25% 75%;

/* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */
background-position: 100px 200px;