Menurut saya pribadi, background atau latar belakang adalah sebuah komponen penting di dalam sebuah penampilan, mulai dari design banner ataupun lainya. dan itu sangat penting bagaimana cara kita membuat background agar tidak terlihat norak, atau sakit dimata. Show
Nah pada kali ini , kita akan mencoba untuk membuat Background dengan CSS, Bagaimana cara nya?? SIMAK ! Cara Mengatur Background dengan CSSUntuk Mengatur background dengan CSS, disini kita akan langsung menggunakan sebuah Selector body yah teman teman, contoh. /*style.css*/
body {
background-color: #DCDCDC;
} pada bagian diatas saat ini kita sedang menggunakan sebuah Property background-color: #DCDCDC; Jika kita cek hasil nya adalah seperti ini. Background ColorSelain dengan background-color: ; , masih ada lagi yaitu kita akan mencoba dengan background-image: ; Ketika men-desain halaman website, adakalanya Anda ingin menampilkan gambar menjadi background full screen memenuhi layar monitor Anda. Atau Anda ingin gambar background tersebut tampil setengah saja (memenuhi setengah screen). Ada beberapa cara yang dapat Anda gunakan untuk membuat gambar background tampil full screen, yaitu menggunakan CSS ataupun jQuery. Namun pada tutorial ini kita akan membuat gambar background full screen dengan CSS. Berikut beberapa teknik yang dapat Anda gunakan untuk membuat gambar background full screen dengan CSS. Daftar Isi Teknik 1 – Background Full Screen dengan CSSCara ini cukup sederhana, pertama Anda cukup membuat tag HTML <div class="bg"></div> Perintah CSS yang digunakan untuk membuat background full screen ialah : body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; Demo Teknik 2 – Background Full ScreenUntuk teknik kedua, Anda dapat membuat background full screen dengan meletakkan gambar menjadi background pada tag html { background: url(background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Demo Teknik 3 – Background Full ScreenUntuk cara ini, background yang ditampilkan dapat mengubah ukurannya di berbagai browser secara otomatis. Juga menggunakan perintah body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;0 gambar background dapat diatur. img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { img.bg { left: 50%; margin-left: -512px; /* 50% */ } } Demo Baca juga : Teknik 4 – Background Full ScreenPerintah CSS lainnya yang dapat Anda gunakan untuk membuat background full screen ialah sebagai berikut : #bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } #bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } Demo Membuat Background Half ScreenSelain membuat background full screen, Anda juga dapat mengatur gambar menjadi background half screen (background setengah layar). Untuk membuat background half screen sangatlah mudah, Anda hanya cukup mengatur body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;1 dari gambar background menjadi body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;2. Berikut perintah CSS untuk membuat background half screen selengkapnya. body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; } Demo KesimpulanAda banyak teknik dan kombinasi perintah CSS yang dapat Anda gunakan untuk membuat background full screen. Dari tutorial diatas, silakan gunakan cara yang sesuai dengan kebutuhan Anda. Atau mungkin Anda memiliki kombinasi perintah CSS lainnya untuk membuat background full screen ?! Jika ada, silakan berbagi di kolom komentar. Untuk memudahkan dalam belajar, Anda dapat mendowload source code dari semua perintah CSS diatas disini Apa itu background size?Property background-size berfungsi untuk mengatur ukuran gambar background. Property background ini memiliki beberapa nilai yang bisa digunakan, diantaranya yaitu : auto : berfungsi untuk mengatur gambar ke ukuran aslinya.
Properti apa yang digunakan untuk latar belakang warna pada CSS?Properti Latar Belakang (Background) CSS yang akan dibahas antara lain: background-color, digunakan untuk mengatur warna lata belakang sebuah elemen HTML. background-image, digunakan untuk mengatur gambar latar belakang sebuah elemen HTML.
Apa itu background attachment CSS?Properti CSS background-attachment merupakan menentukan apakah posisi bahwa gambar ini adalah tetap dalam viewport, atau gulungan bersama dengan blok yang mengandung.
Apa HTML yang benar untuk inserting backgroundTikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.
|