일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- html code
- hyperledger transaction
- html video
- #android activity
- #3차원배열
- #C++ has~a
- html youtube
- html multimedia
- #bubbleSort
- #성적관리프로그램
- relative path
- 토큰경제
- #binary
- #2차원배열
- #CallByAddress
- #C++ 연산자함수오버로딩
- #자바상속#자바이즈어#is~a
- #다차원포인터
- border-box
- docker example
- html charset
- html5 new tag
- #1차원배열
- html id
- html object
- #JAVASCRIPT
- 하이퍼레저패브릭
- git flow
- html plug-in
- mac terminal command
Archives
- Today
- Total
A sentimental robot
Background-image 본문
Html 요소의 배경을 이미지로 설정하고 싶다면 background-image속성을 사용한다.
body{
background-image: url('zomebie.png')
}
이렇게 속성을 준다면 zomebie.png란 이미지로 배경화면이 설정되는데 요소의 배경을 꽉 채우기 위해 이미지가 수평과 수직으로 반복되어 나타난다.
background-repeat속성을 이용하면 수직이든 수평이든 원하는 방식으로 이미지가 반복된다.
repeat-x : horizontally repeated
repeat-y : vertically repeated
no-repeat : once repeated
그 외에도 background-position, background-attachment 속성이 있다.
이렇게 많은 속성들을 하나의 속성에 나열하여 정의할 수 있다.
background: #ffffff url("img_tree.png") no-repeat right top;
'CSS' 카테고리의 다른 글
Padding (0) | 2019.05.06 |
---|---|
Margins (0) | 2019.05.06 |
CSS Basic - Stylesheet적용하기 (0) | 2019.04.16 |
Flex Box property (0) | 2019.04.09 |