반응형
✨배경이미지 크기 조절하기 background-size
| 속성 | 설명 |
| auto | 원래 배경 이미지 크기만큼 표시(기본 값) |
| contain | 지정한 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 |
| cover | 지정한 요소를 다 덮도록 배경이미지를 확대/축소 |
| 크기 값 | 너비 값과 높이 값을 지정 |
| 백분율 | 지정한 요소를 기준으로 백분율 값을 지정 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
div{
margin: 2rem;
width: 200px;
height: 200px;
border: 5px solid #decdad;
background-image: url(img/logo27.png);
background-repeat: no-repeat; /* 반복 여부와 반복 방향 */
display: inline-block;
text-align: center;
font-size: 20px;
}
.test {background-size: auto;}
.test2{background-size: contain;}
.test3{background-size: cover;}
.test4{background-size: 100px 100px;}
.test5{background-size: 70% 70%;}
</style>
</head>
<body>
<div class = "test">auto</div>
<div class = "test2">contain</div>
<div class = "test3">cover</div><br>
<div class = "test4">100px 100px</div>
<div class = "test5">70% 70%</div>
</body>
</html>
300x250
'개발언어 > JS' 카테고리의 다른 글
| [CSS] background-repeat (배경 이미지 반복 여부) (0) | 2022.04.09 |
|---|---|
| [CSS] 컬러 차트 리스트 (0) | 2022.04.08 |
| [JS] 자바스크립트 backtick(`) 억음부호 란? (0) | 2022.04.08 |
| [CSS] textarea 테두리 효과, 사이즈조절 없애기 (1) | 2022.04.05 |
| [Markdown] 마크다운 링크 삽입하기 (0) | 2022.03.22 |
