HTML裡，所有東西都有背景，網頁body本身，h1~h6,p,box標籤等等，這次來簡單介紹一下背景

            H1{background-color: lightblue;}
            span{background-color: violet;}

        <h1>我是H1</h1>
        <span>我是SPAN</span>

背景可以幫助了解現在的區塊大小，因為默認是無背景色的，所以在調width或height時如果沒有背景色的幫助，對於了解當前物件區塊大小是有點困難的，這裡可以看到身為塊元素的H1和行內元素span彼此佔的大小

將背景色去掉後就難以辨識

.box{width:600px;height: 400px;}

<div class="box">一個盒子</div>

沒有背景色，就會以為這個其實很小

但這才是盒子實際的大小

.box{width:600px;height: 400px;color: white;background-image: url(angrydog.jpeg);}

背景圖片，background-image讓背景充滿圖片，url裡是圖片的位址
看到盒子裡有背景圖了，但是因為默認屬性background-repeat的原因同一個圖片會重複出現

                .box{
                    width:600px;
                    height: 400px;
                    color: white;
                    background-color: aqua;
                    background-image: url(angrydog.jpeg);
                    background-repeat: no-repeat;}

將background-repeat設為no-repeat意味著不會重複

background-repeat: repeat-x;只會在x軸重複出現圖片

background-repeat: repeat-y;只會在y軸重複出現圖片

background-size:cover讓圖片完全覆蓋盒子，圖片超出的部分會隱藏

background-size:repeat讓圖片在盒子內完整的出現

background-size:auto默認，讓圖片以原來的大小出現

                .box{
                    width:600px;
                    height: 400px;
                    color: white;
                    background-color: aqua;
                    background-image: url(angrydog.jpeg);
                    background-size:300px 400px;
                    }

background-size:300px 400px;直接自己設定圖片的寬高，前者設定寬度，後者設定高度，只給一個數字則是兩個一起設置