background 속성 - css 배우기
background
배경 이미지를 지정한다.
background: url('https://www.w3schools.com/css/img_fjords.jpg');
https://www.w3schools.com/css/css_background.asp
background-color
배경 색상을 지정한다.
background-color: red;
background-image
배경 이미지를 지정한다.
background-image: url('https://www.w3schools.com/css/img_fjords.jpg');
background-repeat
배경 이미지 반복을 지정한다.
background-repeat: repeat-x; /* 가로 반복 */
background-repeat: repeat-y; /* 세로 반복 */
background-repeat: no-repeat; /* 반복 없음 */
background-position
배경 이미지 위치를 지정한다.
background-position: left top; /* 왼쪽 위 */
background-position: 0 100%; /* 왼쪽 아래 */
background-position: 50% 50%; /* 가운데 */
background-attachment
배경 이미지 스크롤 여부를 지정한다.
background-attachment: scroll; /* 스크롤 */
background-attachment: fixed; /* 고정 */
background-size
배경 이미지 크기를 지정한다.
background-size: auto; /* 원본 크기 */
background-size: cover; /* 화면에 꽉 차게 */
background-size: contain; /* 화면에 맞게 */
background-size: 100px 100px; /* 가로 100px, 세로 100px */
background
background 관련 속성을 한번에 지정한다.
background: background-color background-image background-repeat background-position background-attachment
background-size;
background: red url('https://www.w3schools.com/css/img_fjords.jpg') repeat-x left top scroll auto;
sprite image
여러 이미지를 하나의 이미지로 합쳐서 사용하는 기법
background: url('https://www.w3schools.com/css/img_navsprites.gif') 0 0;
background: url('https://pm.pstatic.net/resources/asset/sp_main.d5b6c236.png') 0 0;
'Publishing > CSS3' 카테고리의 다른 글
flexbox로 레이아웃 만들기 (0) | 2023.12.14 |
---|---|
box model - css 배우기 (0) | 2023.12.05 |
font, text 관련 속성 - css 배우기 (0) | 2023.12.03 |
layout 관련 속성 - css 배우기 (0) | 2023.12.01 |
css의 기초 - css 배우기 (0) | 2023.11.29 |