Menggunakan pattern sebagai background website

Standard

Ada banyak cara untuk membuat tampilan sebuah website menarik. Bisa dengan menambahkan illustrasi, menggunakan font yang unik, menggunakan komposisi warna berbeda dengan yang lain, dan lain sebagainya. Satu cara yang lainnya adalah dengan menggunakan pattern. Menggunakan pattern terutama yang bermotif lembut dan transparan sebagai background (latar belakang) suatu website saat ini juga sedang menjadi trend dan hari ini kita akan membahas sedikit tentang penggunaan pattern untuk mempercantik tampilan website.

Pattern sebagai background website

Pattern sebagai background website

Apa saja yang perlu disiapkan?

Digital Pattern

Pertama-tama tentu saja Anda harus menyiapkan pattern. Ada beberapa website yang menyediakan pattern gratis. Anda bisa mengunjungi artikel berikut:

Segera download gambar pattern yang Anda rasa cocok untuk background website Anda melalui situs penyedia pattern gratis yang Anda sukai.

Selain tersedia dalam format Photoshop Pattern (.PAT), pattern gratis biasanya juga tersedia dalam format grafis digital, berupa .PNG, .JPG, atau .GIF yang umumnya berdimensi kecil. Khusus untuk background website, akan lebih praktis jika kita menggunakan pattern berformat grafis digital.

CSS

Jika Anda sudah membaca artikel MajalahWeb sebelumnya yaitu: Pengenalan CSS dan CSS Selector, Anda pasti sudah tidak asing dengan penerapan CSS dalam web design.
Setelah Anda mengupload file pattern (contoh nama file: pattern.png) di dalam folder images misalnya, atau mengupload di layanan penyimpan foto/grafis gratisan seperti Photobucket, maka Anda dapat menentukan URL dari file pattern Anda ke dalam property background sbb.:

body {
	background-image: url (images/pattern.png);
}

atau jika Anda mengupload pattern ke account Photobucket, maka url pattern misalnya (sebagai contoh) akan menjadi sbb:

body {
	 background-image:('http://1234.photobucket.com/gambar/pattern.png');
}

HTML

Setelah menyiapkan code CSS, salin kode HTML berikut:

<html>
<head>
<title>Menggunakan pattern sebagai background website</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
</head>
<body>
    <div id="container">
       <p>Paragraph Text</p>
    </div>
</body>
</html>

Untuk lebih jelasnya, lihat halaman Demo dan Anda juga dapat mendownload File Demo Tutorial untuk segera bereksperimen dengan berbagai pattern.

3 thoughts on “Menggunakan pattern sebagai background website

Leave a Reply

Your email address will not be published. Required fields are marked *