728x90
background | 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. ex) body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; } |
background-color | HTML 요소의 배경색을 설정함. ex) p { background-color: #FFFFCC; } |
background-image | HTML 요소의 배경 이미지를 설정함. ex) body { background-image: url("/examples/images/img_background_good.png"); } |
background-repeat | 설정된 배경 이미지의 반복 유무를 설정함. repeat-x; 배경이미지를 수평으로만 반복해서 보여줌 repeat-y; 배경이미지를 수직으로만 반복해서 보여줌 no-repeat; 반복되지 않고 한 번만 나타남 ex) body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }; |
background-position | 반복되지 않는 배경 이미지의 상대 위치를 설정함. 1. left top 2. left center 3. left bottom 4. right top 5. right center 6. right bottom 7. center top 8. center center 9. center bottom |
background-attachment | 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정시킴. ex) body { background-attachment: fixed; } |
출처:
728x90
'html+css' 카테고리의 다른 글
font 속성 (0) | 2021.04.24 |
---|---|
text 속성 (0) | 2021.04.24 |
hover시 background-images 확대하기 (0) | 2020.11.21 |
태그 사용시 주의해야 할 점! (0) | 2020.11.21 |