1. 이미지 추가
body {
background-image: url("..경로/wall.png");
}
2. 반복
body {
background-image: url("..경로/wall.png");
background-repeat: repeat-x;
background-repeat: repeat-y;
}
3. 반복 금지
body {
background-image: url("..경로/wall.png");
background-repeat: no-repeat;
}
4. 위치 주기
body {
background-image: url("..경로/wall.png");
background-position: right top;
}
5. 1줄로 표현
body {
background: #ffffff url("..경로/wall.png") no-repeat right top;
}
6. 크기 숫자 지정
body {
background: url("..경로/wall.png");
background-size: 300px 100px;
}
7. 크기 비율 지정
body{
background: url("..경로/wall.png");
background-repeat: no-repeat;
background-size: 75% 50%;
}
8. 크기에 맞게 주기
body{
background: url("..경로/wall.png");
background-repeat: no-repeat;
background-size: cover;
}
반응형
'HTML CSS' 카테고리의 다른 글
Html css Height, Width (0) | 2019.07.05 |
---|---|
Html CSS Padding (0) | 2019.07.04 |
HTML CSS Margin (0) | 2019.07.03 |
Html CSS Borders (0) | 2019.07.03 |
Html CSS 중앙 정렬 (0) | 2019.07.02 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글