Background Example - logaegae/project_study GitHub Wiki

List

* background
* background-image
* background-color
* background-position
* background-repeat
* background-size
* background-attachment

Background Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box
        {
            border:1px solid; height: 500px;
            background-image: url(../images/1.jpg);
            /*배경이미지 삽입*/
           
            background-repeat:  no-repeat;
            /*종류 no-repeat, repeat, repeat -x, repeat -y, round, space*/
           
            background-position: 50% 40% ;
            /* right, bottom, left, top, center, 
               50%(가운데), 100px 40px(x값, y값), 
               center bottom 20px(중간 바닥에서 20px위로) 
            */
         
            background-size: contain;
            /*px, %도 가능, cover는 짧은쪽에 맞춰서, contain은 긴쪽만 맞춰서*/
      
            background-attachment: fixed;
            /*스크롤을 움직여도 이미지는 그대로*/
        }

    </style>
</head>
<body>
    <div class="box">

    </div>

</body>
</html>

Background Attatchment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html, body{height: 100%;}
        body{margin:0;}
        div{
            border:1px #00F solid; 
            height:100%; 
            background-size: cover; 
            background-position: center;
            background-attachment: fixed;
            }
        .unit1{background-image: url(../images/girl.jpg);}
        .unit2{background-image: url(../images/beautiful.jpg);
               background-attachment: local; height : 300px;}
        /* 돌아갈 때는 local, 이미지를 올리는 느낌으로 바뀜, 크기 조절 가능*/
        .unit3{background-image: url(../images/woman.jpg);}
        .unit4{background-image: url(../images/sunset.jpg);}
        .unit5{background-image: url(../images/landscape.jpg);}
    </style>
</head>
<body>
    q
    <div class="unit1">

    </div>
    <div class="unit2">

    </div>
    <div class="unit3">

    </div>
    <div class="unit4">

    </div>
    <div class="unit5">

    </div>

</body>
</html>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️