Categories: CSS

CSS background 배경 속성 정리

css

CSS background 란?

CSS background 배경 속성은 웹 페이지의 디자인을 꾸미고 여러 시각적 효과를 부여하는 데 사용되는 스타일 속성입니다. 배경 속성은 웹 페이지의 배경 색상, 이미지, 크기, 위치 등을 제어합니다.

CSS background 속성

background-color (배경 색상):
- 이 속성은 요소의 배경 색상을 지정합니다.값은 색상 이름, HEX 코드, RGB 코드 등으로 지정할 수 있습니다.
background-image (배경 이미지):
- 이 속성은 요소의 배경에 사용할 이미지의 경로를 지정합니다.여러 개의 이미지를 지정하여 스택으로 쌓을 수 있습니다.
background-repeat (배경 반복):
- 이 속성은 배경 이미지가 화면에서 반복되는 방식을 설정하는 속성으로, 반복 여부 및 방향을 조절할 수 있습니다.
- repeat (기본값): 이미지가 수평 및 수직으로 반복됩니다.
- repeat-x: 이미지가 수평으로만 반복됩니다.
- repeat-y: 이미지가 수직으로만 반복됩니다.
- no-repeat: 이미지가 반복되지 않고 한 번만 나타납니다.
background-position (배경 위치):
- 이 속성은 배경 이미지의 위치를 설정합니다.
- 키워드 값 (e.g., top, bottom, left, right): 요소의 해당 가장자리에 배경 이미지를 배치합니다.
- 픽셀 값 (e.g., 10px 20px): X와 Y 좌표를 픽셀 단위로 직접 지정하여 배경 이미지의 위치를 조절합니다.
- 백분율 값 (e.g., 50% 50%): X와 Y 좌표를 백분율로 지정하여 배경 이미지의 위치를 조절합니다.
- 조합 값 (e.g., left top): 키워드, 픽셀 값, 백분율 값의 조합으로 X와 Y 좌표를 따로 설정할 수 있습니다.
background-size (배경 크기):
- 이 속성은 배경 이미지의 크기를 지정합니다.
- auto (기본값): 원본 이미지 크기를 유지합니다.
- contain: 이미지가 요소의 영역에 완전히 들어가도록 크기를 조절합니다. 이미지의 일부가 잘릴 수 있습니다.
- cover: 이미지가 요소를 완전히 덮도록 크기를 조절합니다. 이미지의 일부가 잘릴 수 있습니다.
- 길이 값 (e.g., 100px, 50%): 픽셀 또는 백분율로 크기를 직접 지정할 수 있습니다.
background-attachment (배경 고정):
- 이 속성은 배경 이미지가 스크롤 될 때 고정 여부를 설정합니다.
- scroll (기본값): 배경 이미지가 요소와 함께 스크롤됩니다.
- fixed: 배경 이미지가 뷰포트에 고정되어 스크롤되지 않습니다. 요소 내에서 스크롤될 때 배경 이미지는 고정된 상태를 유지합니다.
- local: 배경 이미지가 요소와 함께 스크롤됩니다. 이는 일반적으로 플로우 컨테이너 내에서 배경 이미지를 스크롤하는 데 사용됩니다.
background (배경 단축 속성):
- 여러 배경 속성을 한 줄로 간결하게 표현하는 단축 속성으로, 코드의 가독성을 높이고 효율적인 코딩을 할 수 있습니다.

CSS background 예제

background-color 배경 색상

background-color 속성은 요소의 배경 색상을 지정하는 데 사용됩니다. 아래는 간단한 HTML과 CSS를 사용한 background-color 속성의 예제입니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 배경 색상 적용 예제 */
    .box {
      width: 300px;
      height: 200px;
      border: 2px solid #333;
      text-align: center;
      color: white;
      background-color: orange; /* 배경 색상 지정*/
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>배경 색상 예제</h1>
    <p>배경 색상을 지정한 예제입니다.</p>
  </div>
</body>
</html>

HTML

background-color 를 orange 로 주었습니다.

background-image 배경 이미지

이 예제에서 background-image 속성은 Unsplash 에서 무작위 이미지를 가져오는 URL을 사용하고 있습니다. background-repeat: no-repeat은 이미지를 반복하지 않도록 설정하며, background-size: cover는 이미지가 요소를 완전히 덮도록 설정합니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 배경 이미지 적용 예제 */
    .box {
      width: 500px;
      height: 300px;
      /* Unsplash 에서 무작위 이미지 가져오기 */
      background-image: url('https://source.unsplash.com/random');
      background-repeat: no-repeat; /* 배경 반복 없음 */
      background-size: cover; /* 이미지가 요소를 완전히 덮음 */
      border: 2px solid #333;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>배경 이미지 예제</h1>
    <p>배경 이미지를 지정한 예제입니다.</p>
  </div>
</body>
</html>

HTML

background-image 속성과 함께
background-repeat: no-repeat,
background-size: cover 를 적용 했습니다.

background 배경 단축 속성

background 로 여러 배경 속성을 한 줄로 간결하게 표현이 가능합니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 배경 이미지 적용 예제 */
    .box {
      width: 500px;
      height: 300px;
      /* Unsplash 에서 무작위 이미지 가져오기 */
      /* background 로 여러 속성을 한 줄로 표현 */
      background: url('https://source.unsplash.com/random') no-repeat center center/cover;
      border: 2px solid #333;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>배경 이미지 예제</h1>
    <p>배경 이미지를 지정한 예제입니다.</p>
  </div>
</body>
</html>