본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _
html+css

background 속성

by 오늘의갈비찜 2021. 4. 24.
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
10.픽셀 단위로 직접 명시

ex) body {background-position: top right;} body { background-position: 100px 200px;}

background-attachment 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정시킴.

ex) body { background-attachment: fixed; }

출처:

tcpschool.com/css/css_basic_backgrounds

728x90

'html+css' 카테고리의 다른 글

font 속성  (0) 2021.04.24
text 속성  (0) 2021.04.24
hover시 background-images 확대하기  (0) 2020.11.21
태그 사용시 주의해야 할 점!  (0) 2020.11.21