| tag |
비고 |
| bg-imag : url(); |
배경에 배경사진 넣기 |
| bg-repeat |
배경화면 사진 반복 여부 / no-repeat |
| position |
포지션 / 위치 정해주기 |
| attachment |
배경화면 고정하기 |
| size |
사이즈 조절하기 contain(안으로) |
| color |
색깔 |
- auto : 이미지 크기를 유지합니다.
- length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해집니다. 백분율을 사용할 수도 있습니다.
- cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.
- contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background image</title>
</head>
<style>
body{
background-image: url(image/tae1.jpg);
background-size : 200px;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed
/*background-repeat: repeat-y;*/
}
div{
height : 300px;
/*background-color: rebeccapurple;*/
/*background-image : url(image/tae1.jpg);*/
/*background-size : 50% 50%;*/
background-size : contain;
}
</style>
<body>
<div>
</div>
</body>
</html>
