header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmugrafis » WEB DESAIN - DREAMWEAVER » Session 1  |  » Session 2

Mengatur Background Website Agar Sesuai Resolusi Layar

Publish: 13 Juli 2014 | Author & Copyright: Johan | Status: Dreamweaver CSS

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>

<style type="text/css">
body{
background: url('images/background.jpg') no-repeat scroll;
background-size: 100% 100%;
min-height: 700px;
}
</style>

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>
Penempatan Script CSS
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
direktori images
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'
images background
Gambar 4 Images background

5. Ok. sekarang kembali ke aplikasi Dreamweaver, kita lihat pada bagian preview maka background kita akan tampil.
background css
Gambar 5.1 Background CSS

Untuk mengetesnya bisa doble klik file 'tutorial-css-background.html' untuk membuka di browser Anda.
testing background
Gambar 5.2 Testing Background

Nah sekarang anda bisa mengisi halaman website anda dengan konten apapun tanpa takut background dengan CSS tersebut tidak sesuai dengan resolusi halaman website. Karena dengan width 100% dan height 100% maka background website akan selalu mengikuti resolusi layar monitor yang ada.

Agar lebih mudah lagi dalam mempelajarinya, maka Kami telah menyiapkan Download File Latihan dan Source Code dari tutorial Background CSS ini :

download source
Download Now

Terima kasih - semoga bermanfaat

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
 
author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ :
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com


Rekomendasi ilmugrafis

DREAMWEAVER WEBDESIGN
Desain Website Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop...



[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

FOTOGRAFI
Lightroom

VECTOR
Adobe Illustrator

ANIMASI
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D
Blender

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DESIGN
Dreamweaver
jQuery

PUBLISHING
InDesign
Ms. Paint

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker