2022 04 26 CSS

hongwr·2022년 4월 25일
0

CSS

목록 보기
3/12
post-thumbnail

CSS

background

background를 이용하면 쉽게 반응형처럼 만들 수 있다.

background-repeat = 사진 반복 설정
background-position = 배경 사진의 보이는 위치 설정
background-size = 남는 공간 여백을 활용하는 것

<style>
      .box {
        width: 100%;
        height: 200px;
        margin-bottom: 20px;
      }

      .box1 {
        background-image: url('https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp'); 
        /* 이미지 불러오기 */
        background-repeat: no-repeat;
        /* 이미지 반복 설정 */
        background-position: center;
        /* 이미지의 보여줄 위치 */
        background-size: cover;
        /* 이미지의 나타나는 형태 */
      }

      .box2 {
        background: center/cover no-repeat
          url('https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp');
      } // 이런식으로 한 번에 설정 가능

      .box3 {
        background: repeat left
          url('https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp');
      }
    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </body>

profile
코딩 일기장

0개의 댓글