[CSS] CSS 속성 - 배경

in TIL on TIL, Css


CSS 속성 - 배경

배경

background

요소의 배경을 설정, 단축을 갖고 있음.

속성 값

값의미기본값
background-color배경 색상transparent
background-image하나 이상의 배경 이미지none
background-repeat배경 이미지의 반복repeat
background-position배경 이미지의 위치0 0
background-attachment배경 이미지의 스크롤 여부(특성)scroll

사용법

background: 색상 이미지경로 반복 위치 스크롤 특성;

.box1 {
  background: red url("../img/image.jpg") no-repeat left top scroll;
 					 /* 색상 이미지경로 반복 위치 스크롤 특성 */
}
.box2 {
  background: url("../img/image.jpg") no-repeat right 100px;
 					 /* 이미지경로 반복 위치 */
}
.box3 {
  background: red;
  				 /* 색상 */
}




background 개별 속성

background-color

요소의 배경 색상을 지정, 개별 속성

속성 값

값의미기본값
색상요소의 배경 색상 
transparent투명transparent

background-image

요소의 배경에 하나 이상의 이미지를 삽입, 개별 속성

속성 값

값의미기본값
none이미지 없음none
url("경로")이미지 경로(URL) 

사용법

background-image: url("경로");

.box {
  background-image: url("../img/image.jpg");	/* .. 상대경로 */
  width: 120px;
  height: 80px;
}

배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있습니다.

.box1 {
  /* 개별 속성 */
  background-image: 
    url("../img/i1.jpg"),
    url("../img/i2.jpg"),
    url("../img/i3.jpg");
}
.box2 {
  /* 단축 속성 */
  background: 
    url("../img/i1.jpg") no-repeat,
    url("../img/i2.jpg") no-repeat 100px 50px,
    url("../img/i3.jpg") repeat-x;
}

하나 이상의 배경 이미지를 삽입할 경우 , 로 구분합니다. 먼저 작성된 이미지가 더 위에 쌓이비니다. 이런 ‘다중 배경 이미지’는 IE8 이하 버전에서는 사용할 수 없습니다.

예제 1 - 하나의 이미지 삽입

<div class="box"></div>

.box {
  background-image: 
    url("https://heropy.blog/css/images/vendor_icons/css3.png");
  width: 500px;
  height: 250px;
  border: 2px dashed lightgray;
}

예제 2 - 다중 이미지 삽입

<div class="box"></div>

.box {
  background-image: 
    url("https://heropy.blog/css/images/vendor_icons/css3.png"),
    url("https://heropy.blog/css/images/vendor_icons/html5.png"),
    url("https://heropy.blog/css/images/vendor_icons/javascript.png");
  width: 500px;
  height: 250px;
  border: 2px dashed lightgray;
}

background-repeat

배경 이미지의 반복을 설정, 개별 속성

속성 값

값의미기본값
repeat배경 이미지를 수직, 수평으로 반복repeat
repeat-x배경 이미지를 수평으로 반복 
repeat-y배경 이미지를 수직으로 반복 
no-repeat반복 없음 

예제 - 반복 없음

<div class="box"></div>

.box {
  width: 550px;
  height: 350px;
  border: 2px dashed lightgray;
  background-image: 
    url("https://heropy.blog/css/images/vendor_icons/css3.png");
  background-size: 100px;
  background-repeat: no-repeat;
}

background-position

배경 이미지의 위치를 설정, 개별 속성

속성 값

값의미기본값
%왼쪽 상단 모서리는 0% 0%,
오른쪽 하단 모서리는 100% 100%		0% 0%
방향방향을 입력하여 위치 선정
top, bottom, left, right, center		 
단위px, em, cm 등 단위로 지정 

사용법

값이 방향일 경우

background-position: 방향1 방향2;

값이 단위(%, px 등)일 경우

background-position: X축 Y축;

예제

<div class="box"></div>

.box {
  width: 550px;
  height: 350px;
  border: 2px dashed lightgray;
  background-image: 
    url("https://heropy.blog/css/images/vendor_icons/css3.png");
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: right bottom;
/*   background-position: bottom right; 위와 같은 의미 */
/*   background-position: 100% 100%;  위와 같은 의미 */
/*   background-position: 100% bottom; 위와 같은 의미 */
}

background-attachment

요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정, 개별 속성

속성 값

값의미기본값
scroll배경 이미지가 요소를 따라서 같이 스크롤 됨scroll
fixed배경 이미지가 뷰포트(Viewport)에 고정되어, 요소와 같이 스크롤 되지 않음 
local요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨 

예제 - fixed

<section class="section1"></section>
<section class="section2"></section>
<section class="section3"></section>
<section class="section4"></section>
<section class="section5"></section>

section {
  height: 300px;
}
.section2 {
  background-image: url("http://www.istarbucks.co.kr/common/img/main/fav_prod_bg_new.jpg");
  background-size: auto 100%;
  background-position: right bottom;
  background-attachment: fixed;
}
.section3 {
  background-image: url("http://www.istarbucks.co.kr/common/img/main/reserve_bg.jpg");
  background-size: auto 100%;
  background-position: right bottom;
  background-attachment: fixed;
}

예제 - local

<div class="container">
  <div class="for-scroll"></div>
</div>

.container {
  width: 400px;
  height: 300px;
  border: 4px solid red;
  margin: 50px;
  overflow: auto;
  background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png");
  background-size: 50%;
  background-attachment: local;
}
.for-scroll {
  height: 2000px;
}

background-size

배경 이미지의 크기르르 지정

속성 값

값의미기본값
auto배경 이미지가 원래의 크기로 표시됨auto
단위- px, em, cm 등 단위로 지정
- width height 형태로 입력 가능(E.g. 120px 370px)
- width 만 입력하면 비율에 맞게 지정됨(E.g. 120px)		 
cover- 배경 이미지의 크기 비율을 유지하며 요소의 더 넓은 너비에 맞춰짐
- 이미지가 잘릴 수 있음		 
contain- 배경 이미지의 크기 비율을 유지하며 요소의 더 짧은 너비에 맞춰짐
- 이미지가 잘리지 않음		 

예제

<div class="box"></div>

.box {
  width: 500px;
  height: 300px;
  border: 2px solid red;
  margin: 50px;
  background-image: url("https://heropy.blog/css/images/logo.png"); /* 500x500 */
  background-repeat: no-repeat;
  background-size: contain; /* 짧은 너비에 맞춰짐 */
/*   background-size: cover; 긴 너비에 맞춰짐 */
}




참고

패스트캠퍼스(박영웅 강사님) : 올인원 패키지 : 프론트엔드 개발 with React.js


개발자님들 덕분에 많이 배울 수 있었습니다. 감사의 말씀 드립니다.



© 2020. GANGPRO. All rights reserved.