background-image

mil·2023년 2월 27일

background image background-attachment background-position background-repeat background-size img

👉 img

콘텐츠와 밀접한 연관이 있는 이미지 사용 시에 적합

// html

<img src="이미지 주소" alt="이미지 설명">

alt="" 부분에 이미지 설명을 넣어 웹 접근성을 준수할 수 있다.
이미지 설명이 h2, p, span 등의 태그로 기재된다면, alt 뒤의 ="" 을 삭제하여 '이미지 설명 제공하지 않는다.' 라는 의미인 alt 로만 작성하면 된다.

👉 background-image

단순히 디자인적으로 사용된 이미지 사용 시에 적합 (배경, 아이콘 등)

// css

.image {
	background-image: url('이미지 주소');
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: block;
}

background-position

배경 이미지의 위치를 정하는 속성으로, 기본값은 '0% 0%' 이다.
기본적으로 왼쪽-상단을 기준으로 좌표값을 지정한다. (px, % 사용 시)
애니메이션 효과 적용이 된다.

background-position: x-position y-position;

x-position y-position : 가로 위치와 세로 위치 지정
ㄴ 사용 가능한 속성값 : right left top bottom center % px
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속받음

✍ 활용

// 오른쪽 상단
background-position: right top;
background-position: 100% 0%;

// 중앙 하단
background-position: center bottom;
background-position: 50% 100%;

// px 사용
background-position: -50px 0;

// calculate 활용
background-position: calc(100% - 18px) center;

❗️Tip!

x,y 모두 center 값일 때에는 center center;가 아닌 center; 한 번만 기재하여도 된다.

background-position: center;

background-size

배경 이미지 크기를 조절하는 속성

background-size: width height | contain | cover;

auto : 기본값, 이미지의 원래 크기 그대로 보여진다.
px : 한 가지 값만 지정하면 나머지는 자동으로 auto 값이 들어간다.
% : 부모 요소에 비례한 % 값으로 지정된다. 역시 한 가지 값만 지정하면 나머지는 자동으로 auto 값이 들어간다.
cover : 영역을 빈공간 없이 꽉 채운다(확대). 이미지의 일부가 잘릴 수 있다.
contain : 비율은 유지하며 영역의 가로 또는 세로 값에 맞게 크기가 조정되며, 가로 또는 세로 길이에 딱 맞추기 때문에 여백이 생길 수 있다.
initial : 기본값으로 초기화 된다.

✍ 활용

background-size: 100px 100px;
background-size: 20% 20%;
background-size: cover;
background-size: 15px auto;

background-repeat

기본값은 repeat 이다.
패턴의 경우를 제외하고는 주로 하나의 이미지를 사용하기 때문에 no-repeat 으로 이미지가 반복되지 않게 한다.
initial 과 inherit 사용 가능하다.

background-repeat: ;

✍ 활용

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: initial;
background-repeat: inherit;

background-attachment

배경 이미지를 고정하는 속성
기본값은 scroll 이다.

background-attachment: scroll | fixed | local;

scroll : 기본값, 이미지가 요소를 기준으로 상대적인 위치를 갖는다.
fixed : 이미지가 브라우저 창에 상대적인 위치를 갖는다. 스크롤을 내려도 이미지 위치는 고정되어 있다.
local : 스크롤할 때 내용을 기준으로 상대적인 위치를 갖는다.
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속받음

❗️Tip!