CSS - 배경

1. background

: 요소의 배경을 설정

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

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

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

 

---

2. background-color

: 요소의 배경 색상을 지정

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

 

 

3. background-image

: 요소의 배경에 하나 이상의 이미지를 삽입

• 배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있다. 
• 다중 배경 이미지의 경우 ,로 구분하고 먼저 삽입한 이미지가 맨 앞에 뜬다

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

 

 

4. background-repeat

: 배경 이미지의 반복을 설정

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

 

 

5. 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축

- 방향과 단위를 같이 사용 할 수 있음 (50px bottom / left 50px) : bottom은 y축 계열, left는 x축 계열!

 

 

6. background-attachment

: 요소가 스크롤될 때 배경 이미지의 스크롤 여부를 설정

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

 

- 스타벅스 홈페이지 예제

<!-- section.section$*5 -->
<section class="section1"></section>
<section class="section2"></section>
<section class="section3"></section>
<section class="section4"></section>
<section class="section5"></section>

body{
  height:3000px;
}
section{
  height: 300px;
  border: 2px dashed gray;
}
.section2{
  background-image: url("https://www.starbucks.co.kr/common/img/main/mob_fav_prod_bg_new.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: right bottom;
  background-attachment: fixed;
}
.section3{
  background-image: url("http://img.tf.co.kr/article/home/2020/07/10/202011921594349016.jpg");
  background-size: auto 100%;
  background-position: right bottom;
  background-attachment: fixed;
}

 

- attachment: local (많이 사용X)

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

.container{
  width: 400px;
  height: 300px;
  border: 4px solid gray;
  margin: 20px;
  overflow: auto;
  background-image: url("https://heropy.blog/css/images/vendor_icons/snowpack.png");
  background-size: 50%;
  background-attachment: local; /*없으면 요소들 스크롤 불가*/
}
.for-scroll{
  height: 2000px;
}

 

 

7. background-size

: 배경이미지의 크기를 지정

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

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

.box{
  width: 500px;
  height: 500px;
  border: 4px solid gray;
  margin: 20px;
  overflow: auto;
  background-image: url("https://heropy.blog/css/images/vendor_icons/snowpack.png"); 
  background-repeat: no-repeat;
  background-size: cover;
}