Game Nostalgia

Download Harvest Moon Back To Nature (Bahasa Indonesia)

     Assalamu'alaikum wr.wb. hari ini saya ingin memposting File Harvest Moon Bahasa Indonesia.iso buat di komputer. langsung aja nih d...

Membuat Full Page Background Image Menggunakan Css3

Pada awal artikel ini saya telah menyebutkan bahwa ada beberapa cara untuk membuat efek seperti ini, beberapa web developer lebih memilih untuk melakukannya dengan jQuery, dan beberapa lainnya menggunakan CSS, dan sebagian lainnya menggunakan Flash. Pada artikel ini kita akan melihat bagaimana untuk bisa membuat halaman web dengan menggunakan gambar latar belakang layar penuh dengan CSS.
CSS3 memungkinkan kita untuk bisa memilih antara beberapa nilai yang berbeda untuk bagian “background-size”. Bagian ini terdiri dari panjang, persentase, cover, dan contain. Nilai yang akan kita gunakan pertama adalah menutupi atau meng-cover nilai, yang akan mengubah skala gambar ke ukuran yang akan memungkinkan untuk mengisi area konten. Saya ingin menunjukkan bahwa dalam melakukan ini beberapa bagian dari gambar dapat dipotong tergantung pada resolusi layar atau dimensi dari jendela browser atau monitor Anda. ‘Centro Genesis‘ adalah contoh yang baik. Lihatlah bagaimana menampilkan gambar latar belakang layar lebar dalam browser.
Websites With Full Screen Background Images
Sekarang kita lihat bagaimana gambar muncul di browser. Mayoritas foto adalah sama, itu hanya memotong sepotong gambar itu dalam rangka untuk mengisi ketinggian layar.
Websites With Full Screen Background Images
Kode untuk ini adalah menggunakan metode yang benar-benar sangat sederhana. Yang harus Anda lakukan adalah memasukkan beberapa baris CSS di file eksternal CSS anda atau pada bagian header halaman Anda.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Itu mudah. Sekarang mari kita lihat lebih dekat apa yang kita lakukan. Dengan baris pertama kita memanggil gambar latar belakang kita dan menerapkan beberapa gaya untuk itu, “background: url (images / bg.jpg)” adalah menarik atau menampilkan gambar kita yang sebenarnya. Kemudian “no-repeat” memberitahu browser untuk tidak mengulangi gambar, “center center” memberitahu browser ke pusat gambar horizontal dan vertikal, dan “fixed” memberitahu gambar untuk memperbaiki dirinya dalam posisi itu (tidak bergerak) dan tidak ter-scrolling jika kita melakukan scroll halaman.
Teknik ini sederhana dan teruji, tapi Anda bisa mengandalkan satu gambar untuk membuat semua ukuran resolusi itu menjadi baik dan enak dilihat. Bagaimana Anda memutuskan dimensi berapa yang digunakan untuk satu gambar latar belakang Anda? Jika Anda memiliki gambar yang memiliki luas 1900px dan seseorang mencoba untuk melihat situs Anda menggunakan ponsel mereka, butuh waktu yang cukup lama untuk bisa memuat gambarnya agar bisa tampil. Tetapi jika Anda mencoba untuk menembak kesenjangan dan membuat gambar yang memiliki ukuran sekitar 1.000 px maka gambar dapat menjadi pecah dan blur bagi siapa saja melihat situs Anda di monitor layar lebar dengan resolusi diatur ke 1440px.
Sebelum Anda mengubah variabel seperti resolusi layar dan bentuk monitor yang dapat membuat kita menjadi frustasi, izinkan saya untuk memberikan jawaban yang Anda cari: pertanyaan media. CSS akan memungkinkan Anda untuk menentukan atribut yang berbeda untuk berbagai parameter. Dengan kata lain, Anda dapat mengatur permintaan media atau media queries yang memberitahu browser untuk memuat sebuah largeBG.jpg, mediumBG.jpg, atau smallBG.jpg tergantung pada dimensi apa penampil di browser itu.
Sebagai contoh, daripada mendefinisikan gambar latar belakang Anda dalam HTML situs Anda katakanlah Anda membuat div untuk halaman Anda dan menetapkan id dari “container”. Cukup standar. Sama seperti yang kita lakukan di metode pertama, kita akan menetapkan “container” div id kita dengan gambar latar belakang kita, tambahkan beberapa gaya, kemudian kirim ke cover. Saya akan merekomendasikan membuat gambar “largeBG.jpg” yang memiliki resolusi 1440px sampai 1900px.
#container{
background: url(images/largeBG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Sekarang kita punya versi besar mengatur foto latar belakang kita, kita dapat beralih ke media. Inisedikit berbeda karena kita harus melakukan query media untuk memberitahu browser untuk memuat versi yang lebih kecil dari gambar latar belakang kita. Saya biasanya mengatur media query untuk lebar resolusi layarnya 1024px, karena ini adalah resolusi iPad dan kemungkinan penampil mengandalkan pada jaringan daripada wifi kecepatan tinggi untuk memuat halaman. Untuk mengatur query media untuk 1024px, Anda cukup menambahkan baris ini ke CSS anda.
@media only screen and (max-width: 1024px) and (orientation:landscape) {
#container { background: url(images/mediumBG.jpg) 50% 0 no-repeat fixed; !important; background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
Background-size nya sudah agak opsional pada saat ini. Anda tidak dapat mengatur resolusi dari iPad Anda, tetapi Anda harus ingat bahwa media query ini tidak secara spesifik menargetkan iPad, tetapi menargetkan resolusi layar. Karena pasti masih ada sebagian besar surfer web pada monitor yang lebih tua diatur dari 1024 × 768, ini merupakan langkah yang cukup mudah untuk meningkatkan pengalaman menonton mereka.
Setelah mendefinisikan tampilan laneskap untuk iPad ini mari kita membuat media query untuk tampilan potret. Tergantung pada gambar, Anda mungkin ingin mempertimbangkan meletakkannya sepotong, versi lebih tinggi dari gambar Anda di sini sehingga display layar penuh tanpa terlalu terdistorsi dan pecah. Anda juga bisa menyesuaikan posisi untuk memastikan citra foto Anda tetap selaras dengan benar.
@media only screen and (min-width: 768px) and (max-width: 991px) {
#container { background: url(images/mediumTallBG.jpg) 50% 80% no-repeat fixed !important
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
Akhirnya, kita dapat mengatur media query lainnya untuk perangkat mobile.
@media only screen and (min-width: 0px) and (max-width: 767px) {
#container { background: url(images/smalBG.jpg) 50% 80% no-repeat fixed !important; background-size: auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

3 Responses to "Membuat Full Page Background Image Menggunakan Css3"

  1. Terima kasih sob , sangat bermanfaat nih :D

    ReplyDelete
  2. oke gan, jgn lupa berkunjung kembali.... ^_^

    ReplyDelete
  3. Perkenalkan Kami salah satu Penerbit Berita Info Menarik , dan info ini sengaja kami terbitkan Khusus bagi yang Pecinta togel / toggeller., dan disini Kami Telah menemukan AKI JAGAD yang Benar Benar bisa Meramal Nomor yang akan Tembus . Beliau Tidak Punya Blog / Web, Hanya saya Sebagai Pelanggang AKI JAGAD yang pernah melihat bukti nyata ( MITOS ) Sehingga saya memperkenalkan dia di Dunia maya, Jujur saya Merasa Berat Hati Kepada AKI JAGAD, Mungkin Dengan Jalan Seperti inilah saya Membalas Budi kepada AKI JAGAD, Memperkenalkan AKI JAGAD Ke DUNIA MAYA, Karena siapa tahu ada yang Butuh Bantuan dari AKI JAGAD. Nomor TLP: 085398722048. . Beliau Pernah Berpesan Kepada saya ” Tolong disampaikan kepada semua Para Pelanggang saya Atas Kesuksesannya , Hanya satu Pintaku jangan Lupa Berbagi Kepada Orang Miskin atau Kepada Masjid atau gereja yang sangat Memerulkan bantuan . Dan AKI JAGAD . Juga mengucapkan Selamat & Sukses kepada Bapak/Ibu , yang telah berhasil tembus / jp/ jebol / menang Angka Jitu SGP pemberian dari AKI JAGAD . Semoga Hasil kemenangan anda yang diterima bisa untuk menyelesaikan semua urusan & dapat dimanfaatkan untuk hal yang berguna untuk masa depan,AKI JAGAD hanya coba membantu sesuai dengan kemampuan yang AKI JAGAD miliki, selebihnya hanya kekuasaan tuhan yg membagikan rizki nya kepada bapak/ibu sekalian. diberitahukan juga kepada para togeller diseluruh dunia hususnya di indonesia, bahwa AKI JAGAD masih menerima pendaftaran member sampai batas waktu Yg Telah di Tentukan..atau klik di sini

    ReplyDelete

Syarat-syarat Berkomentar:

☻) Berkomentarlah Dengan Bahasa Yang Sopan;
☻) Berkomentarlah Dengan Bijak;
☻) Berkomentarlah Dengan Komentar Yang Berhubungan Dengan Postingan Ini;
☻) Dilarang Berkomentar Yang Berhunbungan Dengan PORNO/SARA
☻) Dilarang Berkomentar SPAM

NB: Jika sahabat melanggar syarat-syarat diatas maka Komentar sahabat akan dihapus.

Terima Kasih.