배경 이미지 속성
배경 이미지 속성은 특정 태그의 배경 이미지 또는 배경 색상을 지정하는 스타일 속성으로 사용 빈도도 많아지고 있음.
-
배경 이미지에 관한 속성
background-image : url(이미지 경로) / 배경 이미지 경로
background-repeat : no-repeat, repeat-x, repeat-y / 배경 이미지 반복
background-attachment : fixed, scroll / 스크롤에 따른 조정
background-positsion : (숫자 픽셀, 숫자 픽셀). left, center, right, top, center / 배경 위치
background-size : 100%, cover, contain, px 값 / 배경이미지 크기background-image 속성
배경 이미지를 2개 이상 적용하는 경우 왼쪽에 위치한 이미지가 앞으로 나온다, 상위 레이어가 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 배경 이미지를 적용하는 기본 방식 */
/* background-image: url("../img/cat_bg.png");
background-color: cadetblue; */
/* 이렇게도 가능 */
/* background: cadetblue url("../img/cat_bg.png"); */
/* 배경 이미지를 2개 만드는 방법 */
background-image: url("../img/cat_bg.png"), url("../img/land.png");
}
</style>
</head>
<body>
</body>
</html>
