<h1>H1元素的背景圖樣</h1>
<h2>H2元素的背景圖樣</h2>
<div class="centered">DIV區塊1的背景圖樣</div>
<p></p>
<div  class="centered" id="div2">DIV區塊2的背景圖樣</div>
html{
  /*設定網頁背景圖樣*/
  background-image: url("https://s3.monsterenergy.com/media/uploads_image/2016/12/29/1600/800/c39356c18fc76dc7eb34e1548782d281.jpg");
  font-family: Microsoft JhengHei;
  text-align: center;
  color: white;
}
h1{
  /*設定h1背景圖案*/
  background-image: url("https://i2.wp.com/safeharboroutreach.org/wp-content/uploads/2016/06/redorange-grunge-background.jpg");
  font-size:3em;
  text-align: center;
}
h2{
  /*設定h2背景圖案*/
  background-image: url("https://st2.depositphotos.com/3074113/6307/i/950/depositphotos_63073909-stock-photo-grey-paint-grunge-background.jpg");
  font-size:2.5em;
  text-align: center;
}
div{
  /*設定DIV區塊背景圖案*/
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyPI4KC3jpFvQ8-L_Hh64doD9c7HSwO_sscVgAI4D36r4joEwj");
  background-repeat:;
  padding:10px;
  height: 200px;
  max-width: 800px;
  font-size:2em;
  border:5px #ccc solid;
}
#div2{
  /*設定DIV區塊背景圖案*/
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyPI4KC3jpFvQ8-L_Hh64doD9c7HSwO_sscVgAI4D36r4joEwj");
  background-repeat:repeat-y;
  padding:10px;
  height: 200px;
  max-width: 800px;
  font-size:2em;
  border:5px #ccc solid;
}
.centered {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.