CSS : background 배경 속성 기본과 활용법
배경 색상 background-color
/*배경색 적용*/
background-color:red;
background-color:#f00;
background-color:#ff0000;
/*배경색 투명도 설정*/
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.5);
배경 이미지 background-image
* 배경이미지는 배경색상보다 우선순위로 높게 처리됩니다.
ex) background-color:yellow; background-image:url( .. ) 두 가지 값이 적용되어있다면 yellow가 아닌 url( )이 먼저 나타납니다.
background-image:url(상대경로)
background-image:url(절대경로)
/*배경이미지 2개 이상 연결하기*/
background-image:url(경로), url(경로)
배경 이미지 반복 background-repeat
* 기본 값은 repeat(반복)으로 주로 사용하는 값은 no-repeat 이며 결과형태에 따라 반복 종류가 정해집니다.
background-repeat:repeat; /*반복*/
background-repeat:no-repeat; /*반복안함*/
background-repeat:repeat-x; /*x축 반복*/
background-repeat:repeat-y; /*y축 반복*/
/*배경이미지가 2장 이상이상일 경우 개별속성*/
background-repeat:repeat-x, repeat;
배경 이미지 고정 background-attachment
* 스크롤 이동 시 배경 이미지가 같이 움직일 지 고정될 지 설정합니다.
background-attachment:fixed; /*고정*/
background-attachment:scroll; /*스크롤*/
/*배경이미지가 2장 이상이상일 경우 개별속성*/
background-attachment:scroll, fixed;
배경 이미지 크기 background-size
* 배경이미지 연결 시 원본 크기가 기본으로 나타납니다.
* 배경이미지 삽입 위치와 크기에 따른 값을 설정해야할 때 (아래) 값을 사용합니다.
background-size:contain; /*이미지를 자리지 않는 선에서 크게 설정*/
background-size:100%; /*이미지의 가로 너비100% 설정*/
background-size:cover; /*이미지의 가로세로비를 비교하여 빈공간이 생기지 않도록 크게 설정*/
background-size:1400px; /*강제 크기 입력(가로 세로 동시입력)*/
background-size:1400px 200px; /*강제 크기 입력(가로 세로 개별 입력)*/
/*배경이미지가 2장 이상이상일 경우 개별속성*/
background-size:100%, cover;
배경 이미지 위치 background-position
* 기본 위치는 왼쪽 상단 값으로 위치(left right top bottom center), 값(0%~100%, px)등을 사용합니다.
background-position:left top;
background-position:right bottom;
background-position:center;
background-position:center top;
background-position:50% 30%;
background-position:50%;
background-position:100px 0;
background-position:100px;
/*배경이미지가 2장 이상이상일 경우 개별속성*/
background-position:left top, center bottom;
배경 통합 속성
background: color image repeat attachment position
* 위 색상-이미지-반복-고정-위치 순서로 작성해야 합니다.
* 필요에 따라 원하는 값만 골라서 작성할 수 있습니다. ex) 색상-이미지-위치
* 웹 브라우저 지원여부에 따라 attachment는 인식 못하는 경우도 있으므로 별도로 작성하는 것이 좋습니다.
background:red url(..) repeat fixed left top;
background:url(...) scroll right bottom;
background:red center;
Comments, Trackbacks