Mengatur Background Website Agar Sesuai Resolusi Layar ~ Welcome To My Blog

Mengatur Background Website Agar Sesuai Resolusi Layar

Background adalah hal yang dapat mempercantik desain dari website. Namun kadangkala kita kesulitan menentukan berapa resolusi background yang tepat atau pas untuk background website tersebut mengingat saat ini ukuran resolusi monitor yang sudah bermacam - macam dan ditambah lagi resolusi layar versi mobile dari smartphone dan tablet.

Sebagai seorang web designer maka kita harus bisa mengakalinya dengan CSS (Cascading Style Sheet) yaitu merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga website akan lebih terstruktur dan seragam.

Bagaimana menyesuaikan Gambar Latar belakang yang berukuran 1400 x 900 pixel agar sesuai dengan berbagai jenis monitor, ok langsung saja berikut scriptnya.

Script ini letaknya di antara tag <head> ... </head>

Penjelasan :
1. <style type="text/css"> adalah kode pembuka dari tag Style CSS

2. body{ adalah kode css ini nantinya berlaku untuk semua body website

3. background: url('images/background.jpg') adalah kode untuk memanggil background website. images/ adalah direktori dari gambar kita, sedangkan background.jpg adalah nama dari background kita.

4. no-repeat scroll; adalah kode untuk memerintahkan agar tidak mengulang / menggandakan background

5. background-size: 100% 100%; adalah untuk mengatur besarnya background, disini kita memakai 100% agar besarnya background nantinya mengikuti semua resolusi layar

6. min-height: 700px; adalah tinggi minimal dari tampilan background

7. }</style> adalah tag penutup dari Style CSS

Ok, setelah saya memberikan teorinya, mari kita praktikkan di dreamweaver

1. Buka program dreamweaver, lalu buat halaman html baru.
Caranya : File > New > Basic Page > Htlm > Ok

2. Setelah itu copykan script di atas di antara tag <head> ... </head>

Gambar 1 Penempatan Script CSS

2. simpan file html tersebut ke dalam sebuah folder, berikan nama file terserah anda. Misal di Folder bernama : Websiteku.
save html

Gambar 2 Menyimpan file html

3. ok, sekarang buat folder baru (New Folder) 'images' sebagai tempat meletakkan gambar background Anda

Gambar 3 Direktori images

4. Cari image atau gambar yang akan dijadikan background website Anda. Rename gambar / image tersebut menjadi background.jpg lalu masukkan ke dalam direktori folder 'images'