1、首先開啟前端開發工具，新建一個html程式碼頁面。

2、在html程式碼頁面上建立一個用於設定背景顏色的div標籤，然後給這個標籤新增上class = "bg-img"。

3、設定背景圖片。建立style標籤，然後在標籤裡面對類為bg-img設定背景圖片、圖片不重複、寬、高的樣式。

4、儲存html程式碼，使用瀏覽器開啟，這個時候會發現瀏覽器上的背景圖片顯示在左上角。

5、回到html程式碼頁面，在bg-img類裡新增background-position: center的屬性。

6、儲存html程式碼後重新重新整理瀏覽器，這個時候會發現瀏覽器上的背景圖片已經自動居中了。

1、上傳圖片。先要構思你想得到什麼效果，小圖片和大圖片的內容要配合好。按照步驟和提示，上傳大小兩張圖片。（注：下面舉例圖片選自網路）。

2、獲取圖片地址。點“顯示原始碼”，進入程式碼編輯。找到圖片地址，複製到“記事本”備用。

3、編輯小圖片。

、清空編輯器，將下列程式碼貼上：＜P><IMG src=“小圖片地址”＞＜／P>。將本文第二步形成的小圖片地址，貼上的這組程式碼中“小圖片地址”那個地方，形成一組新程式碼。

4、編輯大圖片。將本文第三步最後形成的那組新程式碼，複製到“記事本”備用。

清空編輯器，將下列程式碼貼上：

<P align=center>

<TABLE border=0 cellPadding=0 width=589 background=大圖片地址align=center height=390><TBODY><TR><TD>

5、將本文第二步形成的大圖片地址，貼上的這組程式碼中“大圖片地址”那個地方，形成一組新程式碼。綜合編輯。

將本文第三步、第四步形成的新程式碼放到一起，形成新的程式碼：＜P align=center>

<TABLE border=0 cellPadding=0 width=500 background=http://s1.sinaimg.cn/mw690/0025PfUZzy6Jl8u9ksMa0&690 align=center height=390><TBODY><TR><TD><P><IMG src=http://s3.sinaimg.cn/mw690/0025PfUZzy6Jl74xGhkf2&690”＞＜／P>

（注意：程式碼中圖片的寬高和圖片實際寬高要一致）

預覽，看看是不是合在一起了。

6、為小圖片定位。

MARGIN: 0px 0px 0px 0px是定位程式碼，改變每個0的數值，就可以改變圖片離邊的距離。修改好後，就釋出吧。要是配上音樂就更好了。