Scribd Logo
Unggah

Selamat datang di Scribd!

  • Mengatur Background

    Diunggah oleh

    raka
    14 tayangan5 halaman
    Mengatur Background

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Mengatur Background

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    14 tayangan5 halaman

    Mengatur Background

    Diunggah oleh

    raka
    Mengatur Background

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    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>

    Gambar 1 Penempatan Script CSS


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

    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'

    Gambar 4 Images background


    5. Ok. sekarang kembali ke aplikasi Dreamweaver, kita lihat pada bagian preview maka
    background kita akan tampil.

    Gambar 5.1 Background CSS


    Untuk mengetesnya bisa doble klik file 'tutorial-css-background.html' untuk membuka di
    browser Anda.

    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 :

    Anda mungkin juga menyukai