By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Show
Tip: The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Always set a background-color to be used if the image is unavailable. Show demo ❯ Default value:noneInherited:noAnimatable:no. Read about animatableVersion:CSS1 + new values in CSS3JavaScript syntax:object.style.backgroundImage="url(img_tree.gif)" Try it Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Propertybackground-image1.04.01.01.03.5 Note: IE8 and earlier do not support multiple background images. CSS Syntaxbackground-image: url|none|initial|inherit; Property ValuesMore ExamplesExampleSets two background images for the element. Let the first image appear only once (with no-repeat), and let the second image be repeated: Pernahkan Anda membuat suatu script HTML ? Biasanya script ini sangat diperlukan saat Anda ingin membuat suatu website. Karena script HTML dapat mengatur tampilan suatu website. Maka dari itu, Anda harus mempelajari script HTML dengan baik apabila Anda ingin membuat sebuah website dengan design sendiri dan kemudian menghostingnya. Salah satu yang membuat website berpenampilan menarik yaitu dengan adanya background pada suatu website. Maka dari itu, pada artikel ini saya akan menjelaskan bagaimana cara membuat background Image menggunakan HTML. Cara Membuat Background Image di HTMLCara untuk membuat background image menggunakan HTML ada beberapa cara. Ada yang menggunakan CSS, dilus langsung di script HTML dan lain sebagainya. Untuk tutorial membuat background dengan menggunakan CSS , kita membutuhkan properti CSS yaitu background-image, dan didalam properti tersebut mempunyai nilai atau walue yaitu url(nama_gambar.format). Artinya, di dalam url() tersebut memiliki isi link maupun url dari image tersebut serta dengan nama dan juga format pada imagenya. Contohnya yaitu apabila Anda mempunyai gambar yang bernama bunga.png dan file tersebut masih berada pada satu folder dari script HTML maka pada nilai background-image bisa diisi dengan url (bunga.png). Tetapi jika file gambar tersebut masih berada pada folder lainnya , atau tidak berada pada folder yang sama dengan script HTML maka ada penambahan pada value utl(). Contohnya yaitu apabila gambar tersebut berada pada folder background, maka value dari background-image yaitu url(background/bunga.png). Itu lah sedikit penjelasan mengenai properti dari background image, dan dibawah ini adalah beebrapa cara membuat background Image menggunakan HTML. 1. Cara PertamaCara yang pertama yaitu Anda dapat membuat background image langsung dimasukkan ke dalam tag head dan di labeli dengan tag style juga. Script yang dituliskan yaitu seperti berikut ini :
Setelah itu Anda dapat melakukan RUN pada script diatas dengan masuk ke menu Run dan klik Launch in Chrome. 2. Cara KeduaCara yang kedua ini hampir sama dengan cara yang pertama. Anda harus mengetikkan terlebih dahulu tag yang dibutuhkan pada script HTML. Dan kemudian untuk menampilkan background, Anda dapat mengetikkan script dibawah ini.
Anda harus mengetikkan script tersebut di dalam tag style. 3. Cara KetigaPada cara yang ketiga ini, memasukkan background menggunakan CSS. seperti yang telah dijelaskan sebelumnya, pada saat membuat CSS, maka pada tag style harus menggunakan properti type. Disini type nya harus menggunakan text/css, seperti pada gambar dibawah ini. Maka Anda dapat mengetikkan script ini didalam tag style :
Setelah mengetikkan script tersebut, maka di dalam tag div untuk seluruh bagian body Anda harus mencantumkan idnya dengan mengetikkan <div id = “main”>. 4. Cara KeempatUntuk membuat background image menggunakan HTML juga dapat Anda buat dengan mengetikkan background di dalam tagl body. Berikut Script nya :
5. Cara KelimaCara yang kelima yaitu Anda dapat mengaturnya dengan berbagai atribut. Berikut script yang dapat Anda ketikkan ke dalam file HTML.
Demikianlah tutorial atau tata cara membuat background image di HTML. Semoga dengan adanya artikel ini, Anda dapat menambah wawasan Anda. Editor: Muchammad Zakaria Download berbagai jenis aplikasi terbaru, mulai dari aplikasi windows, android, driver dan sistem operasi secara gratis hanya di Nesabamedia.com: Download Software Windows Download Aplikasi Android Download Driver Printer Download Sistem Operasi Sarifah Farrah Fadillah Hanya seseorang yang suka menulis dan tertarik di bidang Teknologi. Dan orang yang selalu percaya akan kata-kata ‘Usaha tidak akan mengkhianati Hasil’. Bagaimana cara menyisipkan gambar latar belakang 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.
Bagaimana cara mengganti background suatu elemen di CSS?jika tidak ingin menggunakan gambar bisa juga dengan mengubah warna background dengan bantuan CSS. untuk mengubah background dengan CSS gunakan property background pada CSS. property background selain di gunakan untuk mengubah background body website bisa juga di gunakan untuk mengubah gambar background pada sebuah ...
Apa itu backgroundbackground-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.
Apa tag yang tepat untuk menambahkan gambar latar?Untuk menambahkan background di html maka perlu menggunakan style CSS (Cascading Style Sheet). Style ini dapat kita buat langsung didalam tag <head> pada dokumen htmlnya.
|