Cara menggunakan backgroundimage css tidak muncul

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.

Teknik 1 – Background Full Screen dengan CSS

Cara ini cukup sederhana, pertama Anda cukup membuat tag HTML div yang diberi class. 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 cover
– Dan men-disable gambar agar tidak melakukan repeat

body, html {
    height: 100%;
}

.bg {
    background-image: url("background.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

Teknik 2 – Background Full Screen

Untuk teknik kedua, Anda dapat membuat background full screen dengan meletakkan gambar menjadi background pada tag html.

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;
}

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%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) {
    img.bg {
     left: 50%;
     margin-left: -512px;   /* 50% */
    }
}

Baca juga :
– Membuat Background 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 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%;
}

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 height dari gambar background menjadi 50%. 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;
}

Kesimpulan

Ada 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

Selamat mencoba.

Cara menggunakan backgroundimage css tidak muncul

19/09/2018    Risman Hakim    61721    Website

Cara menggunakan backgroundimage css tidak muncul

Cara Mengatasi Gambar Tidak Muncul di HTML dan CSS - Terkadang ketika sedang membuat website ada saja hal - hal yang tidak diinginkan terjadi, misalnya saja terjadi error, elemen tidak berfungsi dengan sesuai, ataupun hal sederhana berupa konten tidak muncul pada halaman website. Hal ini merupakan sesuatu yang wajar dan hampir semua developer pernah mengalamai hal seperti itu, tetapi semua itu pasti ada solusi dan cara mengatasinya. Contoh sederhana kasus yang mungkin biasa terjadi adalah ketika kita menambahkan gambar pada halaman web terkadang masih ada yang tidak muncul baik pada HTML atapun pada CSS. Nah, untuk itu saya akan coba membahasa bagaimana Cara Mengatasi Gambar Tidak Muncul di HTML dan CSS.

Ada beberapa hal yang harus diperhatikan ketika kita ingin menambahkan gambar supaya gambar muncul pada halaman web, mulai dari penulisan sintak dasar sampai pada letak file gambar itu yang kurang tepat dituliskan pada saat memanggil gambar. Berikut adalah hal - hal yang yang harus diperhatikan pada saat memanggil gambar pada HTML.

1. Penulisan dasar HTML dan CSS

Biasanya hal sederhana ketika gambar tidak muncul adalah pada penulisan dasar sintak atau tag HTML kurang tepat. Secara default penulisan dasar ketika ingin menambahkan gambar pada HTML adalah seperti berikut.

<body>
    <h2>DUMET School</h2>
    <p>Kursus Website, Digital Marketing & Desain Grafis</p>
    <img src="images/Logo-dumet.jpg" width="400">
</body>

Begitu juga penulisan pada sintak CSS harus diperhatikan, bisa jadi gambar tidak tampil karena cara penulisan kurang tepat, secara default ketika ingin menampilkan gambar penulisan dasar pada CSS seperti berikut.

body {
    background: url(images/bg.png);
}

Jika dirasa penulisan sudah benar tetapi masih belum tampil gambarnya, maka hal lain yang harus diperhatikan adalah.

2. Nama dan ekstensi gambar

Pastikan nama gambar dan ekstensi sudah benar dipanggil pada tag HTML dan CSS, karena ketika penulisan sintak sudah benar akan tetapi nama gambar dan ekstensi salah maka gambar tetap tidak akan muncul. Untuk itu kalian wajib memastikan nama dan ekstensi gambarnya.

Cara menggunakan backgroundimage css tidak muncul

3. Lokasi gambar

Hal lainnya ketika gambar tidak tampil pada halaman web adalah memastikan lokasi gambar sudah tepat, terkadang kita suka lupa dengan nama folder dan lokasi gambar yang tidak disertakan ketika memanggil gambar. Jadi, pastikan lokasi dan folder gambar disertakan agar gambar bisa terbaca.

Cara menggunakan backgroundimage css tidak muncul

Setelah memastikan semua hal diatas telah sesuai, maka harusnya gambar sudah bisa muncul pada halaman web. Nah, itulah beberapa Cara Mengatasi Gambar Tidak Muncul di HTML dan CSS, cukup sekian pembahasan kali ini semoga bisa membantu :)

Web Design, HTML CSS, Tips dan Trik, website

Css properti apa yang digunakan untuk menentukan gambar latar belakang?

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.

Background attachment itu apa?

background-attachment merupakan properti yang digunakan bersamaan dengan background-image. dimana fungsi dari properti tersebut untuk mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap.

Kenapa tidak bisa memunculkan Background gambar di HTML?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.

Manakah syntax HTML yang tepat untuk membuat background dengan gambar?

Tikkan <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.