일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- #C++ has~a
- docker example
- #2차원배열
- #JAVASCRIPT
- html id
- #android activity
- html youtube
- relative path
- html code
- 토큰경제
- html video
- #3차원배열
- #자바상속#자바이즈어#is~a
- mac terminal command
- html5 new tag
- hyperledger transaction
- git flow
- html multimedia
- #CallByAddress
- html object
- #C++ 연산자함수오버로딩
- html charset
- #bubbleSort
- #1차원배열
- #다차원포인터
- #성적관리프로그램
- 하이퍼레저패브릭
- html plug-in
- #binary
- border-box
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 |