background-color : 배경 색 지정하기 background-color : 색상명
- 배경을 넣고 싶은 요소의 속성에 background-color 속성 삽입
- 상속되지 않음
- ex. background-color : #00ff00; / background-color:rgb(0, 255, 0); / background-color:green;
background-clip : 배경 적용 범위 조절하기 background-clip : border-box | padding-box | content-box
- border-box : 박스 모델의 가장 외곽인 테두리(border)까지 적용
- padding-box : 박스 모델에서 테두리를 뺀 패딩(padding) 범위까지 적용
- content-box : 박스 모델에서 내용 부분에만 적용
박스 모델 관점에서 배경을 어디까지 적용할지 지정. 즉 박스모델의 가장 외곽인 테두리(border) 까지 적용할 지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용 부분(content)에만 적용할 지 선택할 수 있음.
박스 모델 관점에서 배경을 어디까지 적용할지 지정. 즉 박스모델의 가장 외곽인 테두리(border) 까지 적용할 지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용 부분(content)에만 적용할 지 선택할 수 있음.
박스 모델 관점에서 배경을 어디까지 적용할지 지정. 즉 박스모델의 가장 외곽인 테두리(border) 까지 적용할 지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용 부분(content)에만 적용할 지 선택할 수 있음.
background-size : 배경 이미지 크기 조정 background-size : auto | contain | cover
- auto : 원래 배경 이미지 크기만큼 표시
- contain : 배경 이미지가 요소 크기에 맞게 모두 표시
- cover : 배경 이미지가 요소의 크기에 관계 없이 여백없이 표시
- px % : 픽셀 또는 퍼센트로 임의적으로 표시
- 다른 예제 보기 (http://robbi.dothome.co.kr/source/07-bgsize.html)
background-image : 웹 요소에 배경 이미지 넣기 - background-image : url (이미지 경로)
- 배경 이미지 파일 : jpg, gif, png
- 문서 전체의 배경 이미지를 지정하려면... body 태그에 지정 / 특정 영역에 배경 이미지를 지정하려면.. class or ID 선택자 이용
- 배경 이미지는 여러 개 사용 가능. 그러나 첫 번째 이미지부터 순서대로 표시됨.
- ex. body { background-image : url("bg1.png"); }
background-position : 배경 이미지 위치 조절하기 - background-position : <수평위치><수직위치>
- 수평위치 : left, center, right
- 수직위치 : top, center, bottom
- 배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정
- 다른 예제 보기 (http://robbi.dothome.co.kr/source/07-bgposition.html)
background-attachment : 배경 이미지 고정하기 - background-attachment : scroll / fixed
- scroll : 화면 스크롤과 함께 배경 이미지도 스크롤 됨. 기본 값
- fixed : 화면이 스크롤되더라도 배경 이미지는 고정.
- 다른 예제 보기 (http://robbi.dothome.co.kr/source/07-bgattachment.html)
background : 속성 하나로 배경 이미지 제어하기 - background : url("이미지명") no-repeat fixed right bottom;