728x90
오늘은 간혹 헛갈리는 background(백그라운드) 속성에 대해서 정리를 해볼까 합니다.
먼저 백그라운드를 컨트롤 할 수 있는 속성에는 총 6가지가 있습니다.
background-color /*색상지정*/
background-image /*이미지 경로지정*/
background-size /*이미지 크기지정*/
background-repeat /*이미지 반복지정*/
background-position /*이미지 위치지정*/
background-attachment /*스크롤 지정*/
background 한줄 작성법
background:red url('이미지경로')no-repeat scroll 0px 20px/100px 100px;
background-color
background-color:#ffffff; /*색상값*/
background-color:rgb(0,0,0); /*rgb 색상값*/
background-color:rgba(0,0,0,1); /*투명도 적용*/
background-color:red; /*색상 이름*/
background-image
background-image:url('파일경로'); /*절대좌표, 상대좌표 모두 가능*/
background-size
background-size:auto; /*기본 크기*/
background-size:100px 150px; /*가로100px 세로150px 사이즈로*/
background-size:cover; /*부모요소 가로크기 맞춰서*/
background-size:contain; /*부모요소 세로크기 맞춰서*/
background-repeat
background-repeat:no-repeat; /*반복하지 않음*/
background-repeat:repeat; /*기본값으로 배경이미지를 모두 반복*/
background-repeat:repeat-x; /*x축(가로) 기준으로 반복*/
background-repeat:repeat-y; /*y축(세로) 기준으로 반복*/
background-position
background-position:10px 20px; /*가로10px 세로20px 에 지정*/
background-position:left top; /*왼쪽 상단에 지정*/
background-position:20% bottom; /*왼쪽 20% 우측 하단에 지정*/
background-attachment
background-attachment:fix; /*스크롤바 움직여도 배경은 고정*/
background-attachment:scroll; /*background-attachment 기본값이며 스크롤바 움직임에 따라 배경이미지 위치가 변경*/
background 중첩
background 중첩은 ie8 이하에서 작동이 안되니 사용할때 주의 부탁드립니다.
background-image:url('이미지경로'), url('이미지경로');
반응형
'공부 > html, css' 카테고리의 다른 글
사이트 이동하기 (자동 연결) (0) | 2023.01.07 |
---|---|
background 동영상 배경 삽입 (0) | 2023.01.07 |
video 태그로 웹에 동영상 넣기 (0) | 2023.01.07 |
audio 태그로 웹에 음악 넣기 (0) | 2023.01.07 |
ul 스타일 주기 (li 불릿 교체 및 삭제, 들여쓰기 없애기) (0) | 2023.01.07 |