Menyisipkan Background Gambar Dengan Css

Tanggal : 23 Aug 2018, Category : CSS, Create By : admin

Selamat datang kembali di website gudang ilmu aplikasi tempatnya anda menambah ilmu, kali ini kami akan membahas mengenai menyisipkan atau menambah background gambar dengan css di halaman website anda. oke langsung saja kita mulai tutorialnya.

Menyisipkan Background Gambar Dengan CSS

Dengan di tambah background gambar pada halaman wesbite anda maka akan menambah daya tarik pengunjung dan mempercantik halaman website. Berikut contoh scriptnya.

<style>
 .backgroud_gambar{
 background-image:url(images.jpg);
 height:500px;
 }
</style>
<body>
 <div class="backgroud_gambar"></div>
</body>

Penambahan style backgorund css tergantung dari besarnya blok html jika kita menggunakan div seperti contoh di atas dan di dalam blok div tersebut tudak berisi kalimat atau blok html lainya maka background tidak akan muncul di layar karena default dari div lebar 100% akan tetapi tinggi 0, jadi jika tidak di setting tinggi dari div maka background tidak akan muncul. 

Secara otomatis jika anda menggunakan background gambar, gambar akan terlurang (repeat) sesuai dengan lebar dan tinggi sebuah blok yang di beri style background-image. Jadi jika anda menggunakan style ini gunakanlah gambar yang tidak terputus. seperti gambar di bawah ini.

Gambar di atas menggunakan background-image, gambar asli dari background tersebut kecil karena menggunakan background-image dan gambar terulang menjadi seakan - akan gambar besar dan memenuhi layar. Tetapi jika anda tidak menginginkan gambar terulang maka anda bisa menggunakan contoh script di bawah ini.

<style>
 .backgroud_gambar{
    background-image:url(images.jpg);
    height:500px;
    background-repeat:no-repeat;
 }
</style>

Anda tinggal menambahkan atribut background-repeat:no-repeat; agar gambar yang anda jadikan background tidak terulang. Untuk atribut background-repeat:no-repeat; Ada beberapa value yaitu :

background-repeat:repeat-x; : Hanya lebar saja yang terulang.

background-repeat:repeat-y; : Hanya tingggi saja yang terulang.

Mungkin cukup sekian tutorial mengenai backgorud gambar, jika ada pertanyaan silahkan isi kolom komentar di bawah. Terimakasi.

Keyword:
  • menyisipkan background gambar dengan css
  • background gambar css
  • css backgroud
  • background css
  • backgroud repeat
  • background repeat horisontal
  • background repeat vertikal

Artikel Lain

Beberapa Hal Yang Harus Anda Siapkan Jika Ingin Menjadi Programmer

Date : 03 Sep 2018, Category : Pemprograman Website, Create By : admin

Pada zaman sekarang banyak sekali perguruan tinggi yang sudah membuka jurusan atau ilmu mengenai komputer dari mulai pengembangan hardware dan software, Tak heran jika kalian kuliah di jurusan berkaitan dengan .....

Pengertian Dan Fungsi Css Dalam Pembuatan Website

Date : 15 Aug 2018, Category : Pemprograman Website, Create By : admin

CSS adalah singkatan dari Cascading Style Sheet atau di terjemahkan di google translate menjadi Lembar bergaya susun. Yaitu sebuah perintah atau intruksi yang dapat digunakan untuk menampilkan text dengan design yang menarik untuk sebuah .....

What Is The Javascript Programming Language And Examples Of Its Use

Date : 13 Feb 2023, Category : JavaScript, Create By : admin

JavaScript is a high-level, interpreted programming language that is widely used to create interactive and dynamic web pages. It is a client-side scripting language, meaning that the code is executed .....