[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-backround-css":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},473,"backround-css","Tutorial CSS : Belajar Background CSS","Dalam CSS, jika kamu ingin melakukan styling berupa memberikan warna atau gambar pada background element kamu bisa menggunakan properti background . CSS memiliki beberapa properti yang berhubungan den",null,[],"2021-10-21T16:00:00Z","2026-07-14T04:39:42.490508Z","\u003Cp>Dalam CSS, jika kamu ingin melakukan styling berupa memberikan warna atau gambar pada background element kamu bisa menggunakan properti \u003Ccode>background\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>CSS memiliki beberapa properti yang berhubungan dengan \u003Ccode>background\u003C\u002Fcode> seperti \u003Ccode>background-color\u003C\u002Fcode>, \u003Ccode>background-image\u003C\u002Fcode>, \u003Ccode>background-repeat\u003C\u002Fcode>, \u003Ccode>background-attachment\u003C\u002Fcode> dan \u003Ccode>background-position\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Kita akan bahas satu-persatu.\u003C\u002Fp>\u003Ch4>Daftar Isi:\u003C\u002Fh4>\u003Ch2>1. background-color\u003C\u002Fh2>\u003Cp>\u003Ccode>background-color\u003C\u002Fcode> berfungsi untuk memberikan warna pada HTML elemen.\u003C\u002Fp>\u003Cp>\u003Cstrong>Contohnya:\u003C\u002Fstrong>\nBagaimana cara kita memberikan warna biru pada sebuah div?\u003C\u002Fp>\u003Cpre>\u003Ccode><div style=\"background-color:blue\">Elemen dengan background-color biru<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Hasilnya:\u003C\u002Fstrong>\u003C\u002Fp>Elemen dengan background-color biru\u003Cp>Kamu bisa memakai nilai color berupa:\u003C\u002Fp>\u003Col>\u003Cli>nilai HEX – seperti #ff0000\u003C\u002Fli>\u003Cli>nilai RGB – seperti rgb (255,0,0)\u003C\u002Fli>\u003Cli>nama color – seperti blue\u003C\u002Fli>\u003C\u002Fol>\u003Ch2>2. background-image\u003C\u002Fh2>\u003Cp>\u003Ccode>background-image\u003C\u002Fcode> digunakan untuk memberikan latar belakang pada sebuah elemen tapi berupa gambar.\u003C\u002Fp>\u003Cp>Misalnya kamu ingin membuat sebuah div dengan gambar sebagai latar belakangnya. Caranya adalah dengan menggunana \u003Ccode>background-image\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Sintaknya adalah \u003Ccode>background-image: url('path_ke_gambar_background')\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\u003Cstrong>Contohnya:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode>.div {\n  background-image: url('https:\u002F\u002Frandomwordgenerator.com\u002Fimg\u002Fpicture-generator\u002F53e5dc454c54a514f1dc8460962e33791c3ad6e04e507749742d7cd79e4cc0_640.jpg');\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jika kita implementasikan class di atas, maka tampilan divnya akan jadi seperti di bawah ini:\u003C\u002Fp>\u003Cp>Sebaiknya kamu set width dan height dari elemen HTML sehingga gambar background bisa terlihat.\u003C\u002Fp>\u003Ch2>3. background-repeat\u003C\u002Fh2>\u003Cp>\u003Ccode>background-repeat\u003C\u002Fcode> berfungsi untuk mengatur apakah gambar background yang di set oleh properti \u003Ccode>background-image\u003C\u002Fcode> bisa berulang atau tidak.\u003C\u002Fp>\u003Cp>Value dari \u003Ccode>background-repeat\u003C\u002Fcode> ada 4 yaitu:\u003C\u002Fp>\u003Col>\u003Cli>\u003Ccode>repeat\u003C\u002Fcode>: ini artinya gambar background akan diulang memenuhi wilayah div baik ke x dan y axis.\u003C\u002Fli>\u003Cli>\u003Ccode>no-repeat\u003C\u002Fcode>: ini artinya gambar backround hanya akan ada 1 di dalam elemen html.\u003C\u002Fli>\u003Cli>\u003Ccode>repeat-x\u003C\u002Fcode>: ini artinya gambar backround akan di ulang ke arah x axis atau dari kiri ke kanan.\u003C\u002Fli>\u003Cli>\u003Ccode>repeat-y\u003C\u002Fcode>: ini artinya gambar backround akan di ulang ke arah y axis atau dari atas ke bawah.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Contohnya bisa dilihat di bawah:\u003C\u002Fp>\u003Cp>See the Pen \u003Ca href=\"https:\u002F\u002Fcodepen.io\u002Fbcscoder\u002Fpen\u002FBaZwvrM\">\u003C\u002Fa>by agus (\u003Ca href=\"https:\u002F\u002Fcodepen.io\u002Fbcscoder\">@bcscoder\u003C\u002Fa>)\non \u003Ca href=\"https:\u002F\u002Fcodepen.io\">CodePen\u003C\u002Fa>.\u003C\u002Fp>\u003Ch2>4. background-position\u003C\u002Fh2>\u003Cp>Jika kamu ingin mengatur posisi dari gambar backgroud, maka kamu perlu menggunakan properti \u003Ccode>background-position\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Secara default, gambar background akan berada di posisi atas kiri (\u003Cem>top left\u003C\u002Fem>). Nah jika kita ingin agar gambar background berada di tengah-tengah misalnya, maka kita bisa set value dari \u003Ccode>background-position:center\u003C\u002Fcode> .\u003C\u002Fp>\u003Cp>Value dari \u003Ccode>background-position\u003C\u002Fcode> bisa berupa: \u003Cstrong>top, right, bottom, left, dan center\u003C\u002Fstrong>. Kamu bisa mengkombinasikan 2 value sekaligus, misalnya \u003Cstrong>top right\u003C\u002Fstrong> atau \u003Cstrong>bottom left\u003C\u002Fstrong>.\u003C\u002Fp>\u003Cp>Kamu juga bisa memberikan value berupa pixel atau %;\u003C\u002Fp>\u003Cp>Kita akan bahas satu-persatu.\u003C\u002Fp>\u003Cp>Contoh posisi default gambar:\u003C\u002Fp>\u003Cp>Contoh posisi default gambar dengan value \u003Ccode>right\u003C\u002Fcode>:\u003C\u002Fp>\u003Cp>Contoh posisi default gambar dengan value \u003Ccode>top right\u003C\u002Fcode>:\u003C\u002Fp>\u003Cp>Contoh posisi default gambar dengan value \u003Ccode>bottom left\u003C\u002Fcode>:\u003C\u002Fp>\u003Cp>Contoh posisi default gambar dengan value \u003Ccode>center\u003C\u002Fcode>:\u003C\u002Fp>\u003Cp>Nah kamu bisa coba-coba kombinasi value lainnya ya jadi semakin mengerti tentang \u003Ccode>background-position\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2>5. background-attachment\u003C\u002Fh2>\u003Cp>Jika kamu ingin membuat gambar background menjadi fixed, maka kamu bisa memakai properti \u003Ccode>background-attachment\u003C\u002Fcode>. Valuenya bisa berupa \u003Ccode>fixed\u003C\u002Fcode> atau \u003Ccode>scroll\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>Contonya bisa kamu cek di link ini: \u003Ca href=\"https:\u002F\u002Fwww.w3schools.com\u002Fcss\u002Ftryit.asp?filename=trycss_background-image_attachment\">\u003Ca href=\"https:\u002F\u002Fwww.w3schools.com\u002Fcss\u002Ftryit.asp?filename=trycss_background-image_attachment\">https:\u002F\u002Fwww.w3schools.com\u002Fcss\u002Ftryit.asp?filename=trycss_background-image_attachment\u003C\u002Fa>\u003C\u002Fa>\u003C\u002Fp>\u003Ch2>5. background-size\u003C\u002Fh2>\u003Cp>\u003Ccode>background-size\u003C\u002Fcode> berfungsi untuk menentukan ukuran dari gambar background.\u003C\u002Fp>\u003Cp>Adapun value dari \u003Ccode>background-size\u003C\u002Fcode> adalah:\u003C\u002Fp>\u003Ctable>\u003Ctr>\u003Cth>Value\u003C\u002Fth>\u003Cth>Deskripsi\u003C\u002Fth>\u003Ctr>\u003Ctr>\u003Ctd>auto\u003C\u002Ftd>\u003Ctd>Ukuran gambar seperti aslinya.\u003C\u002Ftd>\u003Ctr>\u003Ctr>\u003Ctd>percent\u003C\u002Ftd>\u003Ctd>Ukuran gambar di set berapa persen, misalnya 50% dari ukuran aslinya.\u003C\u002Ftd>\u003Ctr>\u003Ctr>\u003Ctd>cover\u003C\u002Ftd>\u003Ctd>resize ukuran gambar mengikuti ukuran elemen HTML. Gambar mungkin akan di resize atau di crop agar bisa memenuhi elemen.\u003C\u002Ftd>\u003Ctr>\u003Ctr>\u003Ctd>contain\u003C\u002Ftd>\u003Ctd>resize ukuran gambar agar bisa terlihat semua di dalam elemen. berbeda dengan cover, contain tidak memotong gambar.\u003C\u002Ftd>\u003Ctr>\u003C\u002Ftr>\u003C\u002Ftr>\u003C\u002Ftr>\u003C\u002Ftr>\u003C\u002Ftr>\u003C\u002Ftr>\u003C\u002Ftr>\u003C\u002Ftr>\u003C\u002Ftr>\u003C\u002Ftr>\u003C\u002Ftable>\u003Cp>Contohnya bisa kamu cek di link ini: \u003Ca href=\"https:\u002F\u002Fwww.w3schools.com\u002Fcssref\u002Fplayit.asp?filename=playcss_background-size&preval=cover\">\u003Ca href=\"https:\u002F\u002Fwww.w3schools.com\u002Fcssref\u002Fplayit.asp?filename=playcss_background-size&preval=cover\">https:\u002F\u002Fwww.w3schools.com\u002Fcssref\u002Fplayit.asp?filename=playcss_background-size&preval=cover\u003C\u002Fa>\u003C\u002Fa>\u003C\u002Fp>\u003Ch2>6. Background Shorthand\u003C\u002Fh2>\u003Cp>Dalam penulisan css tentang backgroud, kamu bisa mempersingkat penulisan kode dengan background shorthand. Kamu bisa menulis semua properti background sekaligus.\u003C\u002Fp>\u003Cp>Contohnya:\u003C\u002Fp>\u003Cpre>\u003Ccode>\nbody {\n  background-color: #ffffff;\n  background-image: url(\"img_tree.png\");\n  background-repeat: no-repeat;\n  background-position: right top;\n}\n\u002F\u002Fcontoh shorthand\nbody {\n  background: #ffffff url(\"img_tree.png\") no-repeat right top;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Dari contoh di atas, hasilnya akan sama antara css yang atas dan bawah.\u003C\u002Fp>\u003Cp>Namun ada yang perlu kamu perhatikan dalam penggunaan background shorthand yaitu urutan dalam penulisannya.\u003C\u002Fp>\u003Cp>Urutan value dari background shorthand:\u003C\u002Fp>\u003Col>\u003Cli>background-color\u003C\u002Fli>\u003Cli>background-image\u003C\u002Fli>\u003Cli>background-repeat\u003C\u002Fli>\u003Cli>background-attachment\u003C\u002Fli>\u003Cli>background-position\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Kamu bisa melewati value yang tidak dibutuhkan, asalkan urutannya sudah benar, css kamu masih bisa berjalan.\u003C\u002Fp>\u003Cp>Nah itulah pembahasan tentang properti background dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang background dalam css.\u003C\u002Fp>\u003Cp>Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS\u003C\u002Fp>","Dalam CSS, jika kamu ingin melakukan styling berupa memberikan warna atau gambar pada background element kamu bisa menggunakan properti background . CSS memilik",[],[],0]