Tutorial: Overlapping rotated background

Assalamualaikum.

Tajuk di atas main reka je (Selalu ada masalah nak pilih tajuk)

Overlapping: bertindih
Rotated: diputar

So... it looks like this.

This is my example. Background dotted line pink tu background sebenar.

Yang stripe biru cream tu background bertindih.

(CLICK HERE FOR LIVE DEMO)

Step 1:
Copy the codes below. Highlight dan tekan Ctrl + C serentak untuk copy.

<div style="
background-image: url('URL BACKGROUND'); position: fixed; top: -300px; right: -300px; width: 500px; height: 500px; -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -o-transform: rotate(50deg);"></div>

Step 2:
Untuk pengguna Simple Template, pergi ke Layout>Add a gadjet>HTML/JavaScript.
Paste codes tadi ke dalam bahagian Content. Tak perlu letak Title.

Untuk pengguna Blogskin, pergi ke Template.
Tekan Ctrl + F serentak dan cari code </style>
Tampal codes tadi di BAWAH code </style>

Step 3:
Ganti text URL BACKGROUND dengan url background kesukaan anda.
Ganti text right tu kepada left kalau anda nak overlapping background tu berada pada bahagian kiri blog.

Step 4:
Klik Preview dulu. Kalau dah berkenan, baru klik Save.

DONE!