background 속성 - govl2233/project_studyej GitHub Wiki

background

  • background-image:url(파일경로);

         문서 전체의 배경이미지를 지정하려면 <body>를 앞에 널어준다.

     특정영역에 배경이미지를 만든다면 선택자 자리에(백그라운드 앞에) 태그를 걸어준다.

  • background-color:색상값; ----------- background-color:green;

  • background-position:위치% 위치%; ------ 배경이미지 위치 조절(키워드 키워드center top,center,right bottom..등등가능)

  • background-repeat:속성값; --------배경이미지 반복여부

                                  repeat-x  작은이미지가 가로로 반복되는 기능

                              repeat-y  작은이미지가 세로로 반복되는 기능

  • background-attachment fixed; (스크롤을 해도 배경이미지 고정)

  • background-attachment: local; ----( 스크롤 하면 컨텐츠와 함께 스크롤)

  • background-size:속성값;

                       background-size:auto; (원본이미지 그대로 사용)

                   background-size:cover;------>화면의 긴값을 기준으로 그림을 맞춤

           background-size:contain; --->화면의 짧은값을 기준으로 그림을 맞춤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        html,body{height:100%}
        body{margin:0}
        div{border:1px #F00 solid; height:100%;
            background-size:cover;
            background-position: center;
            background-attachment: fixed;
        }
        .unit1{background-image:url(../images/fimg1.jpg)}
        .unit2{background-image:url(../images/fimg2.jpg);
            background-attachment: local; height:300px;
        }
        .unit3{background-image:url(../images/fimg3.jpg)}
        .unit4{background-image:url(../images/fimg4.jpg)}
        </style>
    </head>
    <body>
        <div class="unit1"></div>
        <div class="unit2"></div>
        <div class="unit3"></div>
        <div class="unit4"></div>
    </body>
</html>
⚠️ **GitHub.com Fallback** ⚠️