반응형
CSS에서 배경이미지는 기본적으로 모든 화면을 꽉 채우는 속성을 가집니다.
CSS에 이미지 넣기
background-image: url("이미지 경로");
배경이미지 반복 중지 속성
background-repeat: no-repeat;
배경이미지 위치(좌표) 이동 : 단위(%, px)
background-position: 왼쪽 위쪽;
배경이미지 크기 조절
화면단위 : %, px(고정크기)
반응형 디자인 단위 : vw(뷰포트가로크기), vh(뷰포트세로크기)
background-size: 가로크기 세로크기;
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/14_background_image.css">
</head>
<body>
<!-- 백그라운드 이미지(배경 이미지) 예제 -->
</body>
</html>
[CSS]
/* body : 웹브라우저 창 크기를 의미합니다. */
body{
/* 배경 이미지 : 기본, 모든 화면을 꽉 채움 */
/* css 이미지 넣기 : url("이미지 경로") */
/* 사용법 : background-image: url("이미지경로"); */
/* 배경이미지 반복 중지 속성 */
background-repeat: no-repeat;
/* 배경이미지 위치(좌표) 이동 : 단위(%, px) */
/* 사용법 : background-position: 왼쪽 위쪽; */
background-position: 20% 20px;
/* 배경 이미지 크기 */
/* 화면단위 : %, px(고정크기),
vw(뷰포트가로크기), vh(뷰포트세로크기) : 반응형 디자인 단위 */
/* background-size: 가로크기 세로크기; */
background-size: 50vw 50vh;
}
[적용예시]
반응형
'CSS > CSS 이론' 카테고리의 다른 글
| [CSS] CSS 디자인 우선순위 (0) | 2023.08.09 |
|---|---|
| [CSS] 반응형 웹 이론 - 이미지 처리 (0) | 2023.08.09 |
| [CSS] Box 기본속성 (0) | 2023.08.07 |
| [CSS] 폰트스타일 (0) | 2023.08.07 |
| [CSS] 태그선택자 (0) | 2023.08.07 |