티스토리 뷰

CSS

[HTML/CSS] background

baegofda_ 2020. 8. 2. 17:22

* background 

  • background-image : url('');

 

        - 배경에 링크를 걸어서 상용

  • background-repeat : no-repeat;

 

        - 배경이미지를 반복해서 쓸지 안쓸지

  • background-position : center;

 

        - 이미지의 위치지정

  • background-size : cover;

 

 

        - 이미지의 크기지정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/background -->
    <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/background-image -->
    <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>
</html>
저작자표시

'CSS' 카테고리의 다른 글

💡 CSS 란 무엇일까?  (0) 2020.11.04
[HTML/CSS] Custom Properties  (0) 2020.08.06
[HTML/CSS] Transition  (0) 2020.08.02
[HTML/CSS] box, text 정렬하기 ( margin, text-align, translate, text centering)  (0) 2020.08.02
[HTML/CSS] Input type="date" placeholder 없애기  (0) 2020.07.30
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함