[CSS] Background Image

안녕하세요 동기 여러분! 오늘은 배경 이미지를 넣는 방법에 대해 알아봅시다!

 

Background Image

* {
  background-image: url('이미지 주소');
}

여기서 따옴표(Quotation mark)는 큰따옴표(" ")를 써도 상관이 없다.

 

 

---

배경 이미지 겹치는 방법

배경 이미지 겹치기는 필자가 링크한 MDN Web Docs에 가서 background-image의 CSS Demo를 클릭해보면 쉽게 이해할 수 있다.
링크 : https://developer.mozilla.org/ko/docs/Web/CSS/background-image

background-image - CSS: Cascading Style Sheets | MDN

 

---

 

배경 이미지의 여러 값들

값(value)는 background-image : 값(value);에 넣어서 쓴다.

값	설명
url(URL)	이미지의 주소를 써 넣을 수 있다.
none	배경 이미지가 나타나지 않는다 -> 기본 값.
conic-gradient()	적어도 두 가지의 색을 이용하여 원뿔 모양의 그라디언트를 설정한다.
linear-gradient()	적어도 두 가지의 색을 이용하여 직선 모양의 그라디언트를 설정한다.
radial-gradient()	적어도 두 가지의 색을 이용하여 방사선, 학종이 모양(?)의 그라이언트를 설정한다.
repeating-conic-gradient()	원뿔 모양의 그라디언트를 반복한다.
repeating-linear-gradient()	직선 모양의 그라디언트를 반복한다.
repeating-radial-gradient()	방사선, 학종이 모양(?)의 그라이언트를 반복한다.
initial	기본 값으로 설정한다. -> none과 같음
inherit	부모 요소의 값을 따른다.

 

conic-gradient 원뿔 모양의 그라디언트

※ 소괄호 ( ) 안에는 이름이 있는 색, 16진법과 RGB로 설정이 가능하다. (필자는 16진법을 사용했다.)

<!-- HTML 코드 -->
<div id='gradient'></div>

/* CSS 코드 */
#gradient {
  height: 300px;
  width: 300px;
  background-color: aqua; /* <- 그라디언트를 지원하지 않는 브라우저를 위한 방책 */
  background-image: conic-gradient(#f8bbff, #bbf1ff, #bbffd8);
}

원뿔 모양의 그라디언트

#gradient {
  height: 300px;
  width: 300px;
  background-color: aqua;
  background-image: conic-gradient(#f8bbff, #bbf1ff, #bbffd8);
  border-radius: 50%;
}

border-radius 프로퍼티를 사용하면 모서리를 둥글게 깎을 수 있다. 

border-radius가 50%인 경우

 

repeating-conic-gradient 원뿔 모양의 반복

#gradient {
  height: 300px;
  width: 300px;
  background-color: aqua;
  background-image: repeating-conic-gradient(
    #f8bbff 20%,
    #bbf1ff 30%,
    #bbffd8 40%
  );
  border-radius: 50%;
}

퍼센트를 지정해야 모양이 바뀐다. 지정하지 않으면 본래의 모양과 같음.

 

linear-gradient 직선 모양의 그라디언트

#gradient {
  height: 300px;
  width: 300px;
  background-color: aqua;
  background-image: linear-gradient(#f8bbff, #bbf1ff, #bbffd8);
}

 

repeating-linear-gradient 직선 모양의 그라디언트 반복

#gradient {
  height: 300px;
  width: 300px;
  background-color: aqua;
  background-image: repeating-linear-gradient(
    #f8bbff 20%,
    #bbf1ff 30%,
    #bbffd8 40%
  );
}

 

 

radial-gradient 방사선, 학종이(?) 모양의 그라디언트

#gradient {
  height: 300px;
  width: 300px;
  background-color: aqua;
  background-image: radial-gradient(#f8bbff, #bbf1ff, #bbffd8);
}

ㅋㅋㅋㅋ 학종이 모양이라 말한 이유

 

repeating-radial-gradient 방사선, 학종이(?) 모양의 그라디언트 반복

#gradient {
  height: 300px;
  width: 300px;
  background-color: aqua;
  background-image: repeating-radial-gradient(
    #f8bbff 20%,
    #bbf1ff 30%,
    #bbffd8 40%
  );
}

윙윙윙 빠져든다

 

---

오늘의 느낌

학창시절에 학종이 가지고 참 많은 놀이를 했었는데 책상을 치기도 하고 손 모아서 퍽 쳐서 넘기기도 하고 손바닥이 빨개질 때까지 했었다. 꿀잼 ㅎㅎ

학종이로 학을 접지 않은건 함정...