background-color

별초롱언니 2025. 3. 14. 17:50

background-image

요소의 배경에 하나 이상의 이미지를 삽입 (기본값 : none, url("경로"))

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-image: url(nan.png),
      url(co.png);
      width: 500px;
      height: 500px;
      background-size: 180px 150px, 600px 600px;
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

image-repeat

배경 이미지의 반복을 설정

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-image: url(co.png);
      width: 500px;
      height: 500px;
      background-size: 100px;
      background-repeat: repeat;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

background-position

배경 이미지의 위치를 결정

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
    background-image: url(./image1.png);
    width: 500px;
    height: 580px;
    background-size: 100px;
    background-repeat: repeat;
    background-position: right bottom;
  }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

background-attachment

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    section {
      height: 500px;
      border: 2px dashed lightgray;
    }
    .section2  {
      background-image: url(image1.png);
      background-size:10%;
      width: 500px;
      height: 500px;
      background-position: right bottom;
      background-attachment: fixed;

    }
  </style>
</head>
<body>
  <section class="section1"></section>
  <section class="section2"></section>
  <section class="section3"></section>
  <section class="section4"></section>
  <section class="section5"></section>
</body>
</html>

background-size

배경 이미지의 크기를 지정

속성값	의미
auto	배경 이미지가 원래의 크기로 표시 된다.
단위
cover	배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐 이미지가 잘릴 수 있음
contatin	배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 이미지가 잘리지 않음

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 300px;
      border: 4px solid lightblue;
      background-image: url(../ch07/btob.jpg);
      background-size: cover;
      background-position: 50%;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>