[CSS] Background의 모든 것 (image, color, size, repeat, position, attachment)

 

 

배경에 스타일을 줄 때 사용하는 css 속성을 알아보겠습니다.

 

background-color

background-color 속성은 요소의 배경색을 설정합니다.

 

기본 값은  transparent , 투명이며 색상이나 색상코드를 사용합니다.

속성	설명
color	background-color를 설정합니다.
transparent (default)	background-color를 투명하게 설정합니다.

 

/* 키워드 속성 */
div{
  background-color : currentcolor;
  background-color : transparent;
}

/* 키워드 컬러 속성 */
div{
  background-color : yellow;
  background-color : green;
}

/* 헥사 코드 속성 */
div{
  background-color : #ffff00;
  background-color : #000
}

/* RGB 컬러 속성 */
div{
  backgorund-color : rgb(255, 255, 0);
  backgorund-color : rgb(255, 255, 0, 0.5);
 }
 
/* HSL 컬러 속성 */
div{
  backgorund-color : hsl(50, 30%, 30%);
  backgorund-color : hsla(50, 30%, 30%, 0.5);
 }
 
 /* 전역 속성 */
div{
  backgorund-color : inherit; /* 상속 */
  backgorund-color : initial; /* 초기화 */
  backgorund-color : revert; /* 원래대로 돌리기 */
  backgorund-color : unset; /* 설정 해제 */
 }

 

 

배경에 투명도를 넣을 때는  opacity 를 사용해 줍니다.

 opacity 는 불투명도와 투명도를 지정할 수 있으며 값이 낮을수록 더 투명해집니다.

0.0(투명) ~ 1.0(불투명)

 

See the Pen Untitled by 조은주 (@eslwtilj-the-solid) on CodePen.

 

 

 

 

지정 가능한 색상 값은 아래 링크페이지에서 확인할 수 있습니다.

https://www.w3schools.com/cssref/css_colors_legal.php

CSS Legal Color Values

 

일반적으로 배경색은 웹 접근성을 준수하기 위해 글자색과 명암비를 고려해야 해요.

낮은 시력을 가진 사용자도 텍스트를 인식하는데 어려움이 없도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

 

명암비를 확인할 수 있는 페이지는 아래 링크에서 확인해 주세요!

2024.03.07 - [Design] - [디자인] 웹디자인 작업할 때 필요한 사이트 모음(폰트, 디자인소스, 웹접근성)

 

또한 배경 이미지를 사용하더라도 로딩할 수 없는 상황을 대비해 기본 배경색을 지정해 주는 것을 권장합니다!

 

---

background-image

background-image 속성은 배경에 이미지 경로 및 그라디언트를 설정합니다.

 

기본 값은  none 이며 배경이미지가 없음이며 이미지의 위치는 상대경로, 절대경로로 나타낼 수 있습니다.

속성값을 명시할 때는 url() 함수를 사용하고 경로에 공백이 나올 것을 대비하여 큰따옴표로 묶어주는 것이 안전합니다.

 

속성	설명
none (default)	백그라운드 이미지를 설정하지 않습니다.
url	백그라운드 이미지 경로를 설정합니다.
gradient	백그라운드에 그라디언트를 설정합니다.

 

/* 기본 속성 */
div{
  background-image : url("../images/sample.png")
}

/* 다중 이미지 설정 */
div{
  background-image : url("../images/sample.png"), url("../images/add.png");
}

/* 그라디언트 설정 */
div{
  background-image : linear-gradient();
  background-image : radial-gradient();
  background-image : repeating-linear-gradient();
  background-image : repeating-radial-gradient();
}

/* 전역 속성 */
div{
  background-image : inferit; /* 상속 */
  background-image : initial; /* 초기화 */
  background-image : revert; /* 원대대로 돌리기 */
  background-image : nuset; /* 설정 해제 */
}

 

---

background-repeat

background-repeat 속성은 배경 이미지의 반복 여부를 설정합니다.

 

속성	설명
repeat (default)	배경 이미지를 x축 y축으로 반복 설정합니다.
repeat-x	배경 이미지를 x축으로 반복 성정합니다.
repeat-y	배경 이미지를 y축으로 반복 설정합니다.
no-repeat	배경 이미지를 반복하지 않습니다. 이미지가 한번만 나옵니다.
space	배경 이미지를 공간에 맞에 반복합니다. (여백이 생깁니다.)
round	배경 이미지를 공간에 맞게 여백 없이 반복합니다.

 

/* 키워드 값 */
div{
  background-repeat: repeat-x;
}
div{
  background-repeat: repeat-y;
}
div{
  background-repeat: repeat;
}
div{
  background-repeat: space;
}
div{
  background-repeat: round;
}
div{
  background-repeat: no-repeat;
}

/* 2개 값 구문: 가로 | 세로 */
div{
  background-repeat: repeat space;
}
div{
  background-repeat: repeat repeat;
}
div{
  background-repeat: round space;
}
div{
  background-repeat: no-repeat round;
}

 

---

background-position

background-position은 소속성은 배경 이미지의 위치를 설정합니다.

 

background-positon-x : 배경이미지의 X축 위치를 설정합니다.

background-positon-y : 배경이미지의 Y축 위치를 설정합니다.

background-positon : 배경이미지의 위치를 설정합니다.

속성값	설명
left	백그라운드 위치를 왼쪽으로 설정합니다.
center	백그라운드 이미지 위치를 가운데로 설정합니다.
right	백그라운드 이미지 위치를 오른쪽으로 설정합니다.
length	백그라운드 이미지 위치를 CSS 단위로 설정합니다.
percentage	백그라운드 이미지 위치를 퍼센트로 설정합니다.

 

div{
  background-position: top; /* 위에 배치 */
}
div{
  background-position: bottom; /* 아래에 배치 */
}
div{
  background-position: left; /* 왼쪽에 배치 */
}
div{
  background-position: right; /* 오른쪽에 배치 */
}
div{
  background-position: center; /* 가운데에 배치 */
}

 

---

background-size

background-size 속성은 배경 이미지의 사이즈를 설정합니다.

 

속성	설명
auto	배경 이미지의 원본 사이즈로 표현됩니다.
contain	이미지를 가로와 세로 비율을 유지하면서 요소 크기에 맞게 설정합니다.
cover	이미지를 화면 크기게 맞게 공백 없이 요소 크기에 맞게 설정합니다.
length	이미지의 크기를 단위로 설정합니다.
percentage	이미지의 크기를 %로 설정합니다.

 

div{
  background-size: auto;
}
div{
  background-size: contain;
}
div{
  background-size: cover;
}
div{
  background-size: 300px (auto); /* 가로사이즈만 지정 (세로는 auto) */
}
div{
  background-size: 300px 100px; /* 가로, 세로사이즈 지정*/
}
div{
  background-size: 100% (auto); /* 가로사이즈만 지정 (세로는 auto)*/
}
div{
  background-size: 100% 50%; /* 가로, 세로사이즈 지정*/
}

 

---

background-attachment

background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.

 

속성	설명
scroll (default)	배경이미지와 콘텐츠를 표현하는 기본값입니다.
fixed	배경이미지를 고정하고, 콘텐츠만 움직입니다.
local	배경이미지와 콘텐츠가 같이 움직입니다.

 

---

background

background 속성은 배경 이미지의 속성을 일괄적으로 설정합니다.

 

속성의 순서는 아래와 같습니다.

background: color image repeat position / size attachment 

 

position과 size는 일부 값의 단위를 공유하므로 슬러시로 구분을 해야 합니다.

 

속성	설명
image	배경 이미지 경로를 설정합니다.
position	배경 이미지 위치를 설정합니다.
size	배경 이미지 사이즈를 설정합니다.
repeat	배경 이미지 반복 여부를 설정합니다.
attachment	배경 이미지 고정 여부를 설정합니다.
color	배경색을 설정합니다.

 

// 배경컬러만 지정
div{
  background: green;
}

// 배경이미지와 이미지 반복제거
div{
  background: url("sample.png") no-repeat;
}

// 배경이미지와 반복제거, 상단 가운데 위치
div{
  background: url("sample.png") no-repeat center top;
}

// 배경컬러와 배경이미지, 반복제거, 가운데 위치
div{
  background: green url("sample.png") no-repeat center;
}

// 배경컬러와 배경이미지, 반복제거, 가운데 위치, 사이즈 설정
div{
  background: green url("sample.png") no-repeat center / 100%;
}

// 배경컬러와 배경이미지, 반복제거, 가운데 위치, 사이즈 설정, 이미지 고정
div{
  background: green url("sample.png") no-repeat center / cover fixed;
}