How To Set Background Image In Css Full Screen
Ketika men-desain halaman website, adakalanya Anda ingin menampilkan gambar menjadi groundwork 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 groundwork tampil full screen, yaitu menggunakan CSS ataupun jQuery. Namun pada tutorial ini kita akan membuat gambar groundwork full screen dengan CSS.
Berikut beberapa teknik yang dapat Anda gunakan untuk membuat gambar background full screen dengan CSS.
Teknik one – Groundwork Full Screen dengan CSS
Cara ini cukup sederhana, pertama Anda cukup membuat tag HTML div
yang diberi form. Kemudian Anda menambahkan perintah CSS pada class tersebut.
Perintah CSS yang digunakan untuk membuat background full screen ialah :
– Mengatur tinggi gambar menjadi 100%
– Mengatur ukuran gambar menjadi embrace
– Dan men-disable gambar agar tidak melakukan repeat
body, html { peak: 100%; } .bg { groundwork-image: url("background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;
Teknik 2 – Background Total Screen
Untuk teknik kedua, Anda dapat membuat background full screen dengan meletakkan gambar menjadi background pada tag html
.
html { background: url(groundwork.jpg) no-repeat center heart fixed; -webkit-groundwork-size: comprehend; -moz-background-size: comprehend; -o-background-size: embrace; background-size: encompass; }
Teknik 3 – Background Full Screen
Untuk cara ini, background yang ditampilkan dapat mengubah ukurannya di berbagai browser secara otomatis. Juga menggunakan perintah min-width
gambar background dapat diatur.
img.bg { min-height: 100%; min-width: 1024px; width: 100%; top: auto; position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { img.bg { left: l%; margin-left: -512px; /* fifty% */ } }
Baca juga :
– Membuat Groundwork Video Pada Website Dengan CSS
– Cara Menggunakan Google Fonts
– Membuat Menu Responsive dengan HTML dan CSS
– Mengatur Tata Letak Gambar dengan CSS
Teknik 4 – Background Full Screen
Perintah CSS lainnya yang dapat Anda gunakan untuk membuat groundwork full screen ialah sebagai berikut :
#bg { position: fixed; peak: -l%; left: -50%; width: 200%; height: 200%; } #bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-superlative: 50%; }
Membuat Background Half Screen
Selain 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 peak
dari gambar groundwork menjadi 50%
. Berikut perintah CSS untuk membuat background half screen selengkapnya.
body, html { top: 100%; } .bg { background-image: url("background.jpg"); height: l%; background-position: center; background-repeat: no-repeat; background-size: comprehend; }
Kesimpulan
Ada banyak teknik dan kombinasi perintah CSS yang dapat Anda gunakan untuk membuat background total 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
Selamat mencoba.
How To Set Background Image In Css Full Screen,
Source: https://www.eplusgo.com/membuat-gambar-background-full-screen-dengan-css/
Posted by: handydampacked.blogspot.com
0 Response to "How To Set Background Image In Css Full Screen"
Post a Comment