CSS 09. 배경 관련 스타일

배경 관련 스타일( background-)

background-color : 배경색 지정시 사용

<div id="div-bg">
        나는 라이너 묻힌 있습니다. 다하지 계집애들의 차 이국 듯합니다. 새겨지는 비둘기, 불러 프랑시스 봅니다. 별빛이 가을 부끄러운 쓸쓸함과 지나고 어머님, 봅니다. 하나에 많은 이 봅니다. 까닭이요, 나는 내 않은 이름과 아이들의 까닭입니다. 자랑처럼 별 속의 말 있습니다. 
    </div>
<style>
#div-bg{
            background-color: lightgoldenrodyellow;
            border :30px solid cadetblue;
            padding:20px;
            width: 50%;
            box-sizing: border-box;
         }
</style>

나는 라이너 묻힌 있습니다. 다하지 계집애들의 차 이국 듯합니다. 새겨지는 비둘기, 불러 프랑시스 봅니다. 별빛이 가을 부끄러운 쓸쓸함과 지나고 어머님, 봅니다. 하나에 많은 이 봅니다. 까닭이요, 나는 내 않은 이름과 아이들의 까닭입니다. 자랑처럼 별 속의 말 있습니다.

---

background-clip : 배경을 적용시키고자 하는 범위 지정할 때 사용

선택자{background-clip : border-box(기본값) | padding-box | content-box;}

 <div class="div-test" id="div1">이름과, 이 어머님, 딴은 우는 아스라히 흙으로 계십니다. 애기 아직 걱정도 내 가슴속에 청춘이 보고, 한 듯합니다. 이름을 지나고 어머님, 멀리 벌레는 언덕 멀듯이, 하나에 까닭입니다. 소학교 이름자 하나에 별 벌레는 멀리 패, 가을로 슬퍼하는 듯합니다. 풀이 차 북간도에 별 이웃 나는 버리었습니다. </div>
    <div class="div-test" id="div2">이름과, 이 어머님, 딴은 우는 아스라히 흙으로 계십니다. 애기 아직 걱정도 내 가슴속에 청춘이 보고, 한 듯합니다. 이름을 지나고 어머님, 멀리 벌레는 언덕 멀듯이, 하나에 까닭입니다. 소학교 이름자 하나에 별 벌레는 멀리 패, 가을로 슬퍼하는 듯합니다. 풀이 차 북간도에 별 이웃 나는 버리었습니다. </div>
    <div class="div-test" id="div3">이름과, 이 어머님, 딴은 우는 아스라히 흙으로 계십니다. 애기 아직 걱정도 내 가슴속에 청춘이 보고, 한 듯합니다. 이름을 지나고 어머님, 멀리 벌레는 언덕 멀듯이, 하나에 까닭입니다. 소학교 이름자 하나에 별 벌레는 멀리 패, 가을로 슬퍼하는 듯합니다. 풀이 차 북간도에 별 이웃 나는 버리었습니다. </div>
<style>
.div-test{
            background-color: green;
            margin:30px;
            border:10px dashed black;
            padding: 20px;
         }
         #div1{
            background-clip: border-box;
         }
         #div2{
            background-clip: padding-box;
         }
         #div3{
            background-clip: content-box;
         }
</style>

이름과, 이 어머님, 딴은 우는 아스라히 흙으로 계십니다. 애기 아직 걱정도 내 가슴속에 청춘이 보고, 한 듯합니다. 이름을 지나고 어머님, 멀리 벌레는 언덕 멀듯이, 하나에 까닭입니다. 소학교 이름자 하나에 별 벌레는 멀리 패, 가을로 슬퍼하는 듯합니다. 풀이 차 북간도에 별 이웃 나는 버리었습니다.

이름과, 이 어머님, 딴은 우는 아스라히 흙으로 계십니다. 애기 아직 걱정도 내 가슴속에 청춘이 보고, 한 듯합니다. 이름을 지나고 어머님, 멀리 벌레는 언덕 멀듯이, 하나에 까닭입니다. 소학교 이름자 하나에 별 벌레는 멀리 패, 가을로 슬퍼하는 듯합니다. 풀이 차 북간도에 별 이웃 나는 버리었습니다.

이름과, 이 어머님, 딴은 우는 아스라히 흙으로 계십니다. 애기 아직 걱정도 내 가슴속에 청춘이 보고, 한 듯합니다. 이름을 지나고 어머님, 멀리 벌레는 언덕 멀듯이, 하나에 까닭입니다. 소학교 이름자 하나에 별 벌레는 멀리 패, 가을로 슬퍼하는 듯합니다. 풀이 차 북간도에 별 이웃 나는 버리었습니다.

---

background-image :  배경에 이미지 사용 

선택자{   
         background-image:url('이미지 경로')
         background-repeat: repeat (요소에 가득찰때까지 가로,세로반복)| repeat-x | repeat-y | no-repeat;
         background-size: auto| contain | cover | px px| % %;
         background-position : 좌/우/가운데  위/아래/가운데 | px px| % %;
         background-attachment : scroll | fixed;
 }