[CSS] 백그라운드

---

1.background-image

배경이미지 지정

<style>
    .myp{
        height: 60;
        background-image: url("https://media.tenor.com/5BYK-WS0__gAAAAM/cool-fun.gif");
        background-size:60px 60px;
    }
    
</style>

<p class="myp"></p>

 

 

 

2.background-repeat

이미지 반복 설정
2개이상의 이미지를 배경으로 사용할수도있음(이때 다른 프로퍼티값은 , 로 구분하여 작성)

<style>
    .myp2{
        height: 60;
        background-image: url("https://media.tenor.com/5BYK-WS0__gAAAAM/cool-fun.gif");
        background-repeat: repeat-y;
        background-size:60px 30px;
    }
    .myp3{
        height: 60;
        background-image: url("https://media.tenor.com/5BYK-WS0__gAAAAM/cool-fun.gif");
        background-repeat: no-repeat;
        background-size:60px 30px;
    }
    .myp4{
        height: 60;
        background-image: url("https://media.tenor.com/5BYK-WS0__gAAAAM/cool-fun.gif"), url("https://media1.tenor.com/m/wfdSCMP3BVEAAAAC/excited-dog.gif");
        background-repeat: no-repeat,repeat;
        background-size:60px 30px , 50px 50px;
    }
    
</style>

<p class="myp2"></p>
<p class="myp3"></p>
<p class="myp4"></p>

 

 

3.background-size

이미지 사이즈 지정
px:px값으로 지정
%:%값으로 지정
cover: 키기 비율 유지한 상태로 부모의 width,height중 큰값에 맞춤
contain: 크기비율 유지한 상태에서 이미지스케일 조정하여 이미지가 전체가 들어갈수있도록 한다.

 

<style>

    .myp5{
        height: 100px;
        width: 100px;
        background-image: url("https://media.tenor.com/5BYK-WS0__gAAAAM/cool-fun.gif");
        background-size: 100% 100%;
    }

    .myp6{
        height: 100px;
        width: 100px;
        background-image: url("https://media.tenor.com/5BYK-WS0__gAAAAM/cool-fun.gif");
        background-size: 10 10;
    }

    .myp7{
        height: 100px;
        width: 100px;
        background-image: url("https://media.tenor.com/5BYK-WS0__gAAAAM/cool-fun.gif");
        background-size: cover;
    }

    .myp8{
        height: 100px;
        width: 100px;
        background-image: url("https://media.tenor.com/5BYK-WS0__gAAAAM/cool-fun.gif");
        background-size: contain;
    }

</style>

<p class="myp5"></p>
<p class="myp6"></p>
<p class="myp7"></p>
<p class="myp8"></p>

 

 

 

 

 

4.background-attachment

배경화면이 스크롤 되지않고 고정되게 한다

<style>
body{
        background-image: url("https://media1.tenor.com/m/OWzDHA8TCKcAAAAC/spongebob-spongebob-squarepants.gif");
        background-attachment: fixed;
    }
</style>

 

 

 

 

5.background-position

background 이미지의 출력위치 지정 (기본값 좌상단 0% 0%)

 

 

6.background-color

배경 색상지정

 

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/css3-background