Html perintah untuk gambar latar belakang

1. Unggah gambar latar belakang
2. Buka file HTMLnya
3. Tambahkan kepala dokumen HTML menggunakan tag ' dan '. 4. Sisipkan tanda dan di antara tag "Kepala".
5. Tambahkan elemen tubuh {
6. Tambahkan gambar latar belakang. url(" ");
7. Tambahkan path lengkap ke gambar di antara tanda kutip
8. Tambahkan } di akhir bagian tubuh CSS Anda
9. Simpan perubahan Anda

Apakah ringkasan ini membantu Anda? YaTidak

Terima kasih kepada semua penulis untuk membuat halaman yang telah dibaca 2.208.436 kali

Apa yang dilihat pengguna di situs web akan memengaruhi seberapa baik pengalaman pengguna mereka. Ini juga akan mempengaruhi seberapa mudah mereka dapat menggunakan seluruh situs secara umum

Menambahkan gambar ke latar belakang bagian tertentu dari sebuah situs web seringkali lebih menarik dan menarik secara visual daripada hanya mengubah warna latar belakang

Browser modern mendukung berbagai jenis file gambar seperti

section {
    background-repeat: repeat;
        }

3,

section {
    background-repeat: repeat;
        }

4,

section {
    background-repeat: repeat;
        }

5, dan

section {
    background-repeat: repeat;
        }

6

Artikel ini menjelaskan cara menambahkan gambar ke kode HTML Anda dan cara menyempurnakannya agar terlihat lebih baik

Sintaks Gambar Latar Belakang

Langkah pertama adalah memastikan Anda membuat direktori aset (folder) untuk menampung gambar yang ingin Anda gunakan dalam proyek Anda

Misalnya kita dapat membuat folder

section {
    background-repeat: repeat;
        }

_7 di proyek yang sedang kita kerjakan dan menambahkan gambar bernama

section {
    background-repeat: repeat;
        }

8 yang ingin kita gunakan

Properti CSS

section {
    background-repeat: repeat;
        }

9 memungkinkan Anda untuk kemudian menempatkan gambar di belakang elemen HTML apa pun yang Anda inginkan

Ini bisa jadi seluruh halaman (dengan menggunakan pemilih

section {
    background-repeat: no-repeat;
        }

0 di CSS yang menargetkan elemen

section {
    background-repeat: no-repeat;
        }

1 di HTML kita), atau hanya bagian tertentu yang berdiri sendiri dari halaman seperti elemen

section {
    background-repeat: no-repeat;
        }

2 seperti pada contoh di bawah ini

Untuk menambahkan

section {
    background-repeat: repeat;
        }

_9 ke tag bagian di file

section {
    background-repeat: no-repeat;
        }

4 Anda, tulis kode berikut

section {
     background-image: url("images/sunset.png");
        }

Mari kita bahas apa yang terjadi di sini secara mendetail

• section {
      background-repeat: no-repeat;
          }
  

  2 menentukan tag yang ingin Anda tambahkan gambar

• section {
      background-repeat: no-repeat;
          }
  

  6 digunakan untuk memberi tahu CSS di mana gambar kita berada
• Di dalam tanda kurung,

  section {
      background-repeat: no-repeat;
          }
  

  7 adalah jalan menuju gambar. Ini memungkinkan browser mengetahui URL apa yang harus ditarik
• Jalur dalam contoh ini disebut jalur

  section {
      background-repeat: no-repeat;
          }
  

  _8 yang berarti ini adalah file lokal, terkait dengan proyek kami dan direktori kerja kami saat ini dan bukan alamat web. Untuk menambahkan gambar kita juga bisa menggunakan jalur

  section {
      background-repeat: no-repeat;
          }
  

  _9, yang merupakan alamat web lengkap dan dimulai dengan URL domain (

  section {
      background-repeat: repeat-y;
          }
  

  0)
• Menggunakan tanda kutip adalah kebiasaan yang baik tetapi kita dapat menghilangkannya, jadi

  section {
      background-repeat: repeat-y;
          }
  

  1 berfungsi sama
• Jangan lupa titik koma

Cara Menghentikan Pengulangan Latar Belakang

Saat Anda menerapkan gambar latar belakang ke suatu elemen, secara default itu akan berulang

Jika gambar lebih kecil dari tag yang menjadi latar belakangnya, itu akan berulang untuk mengisi tag

Bagaimana kita menghentikan hal ini terjadi?

Properti

section {
    background-repeat: repeat-y;
        }

_2 mengambil 4 nilai dan kami dapat mengubah arah pengulangan gambar, atau menghentikan gambar agar tidak berulang secara bersamaan

section {
    background-repeat: repeat;
        }

Ini adalah nilai default jika kami tidak memberikan nilai pada properti

section {
    background-repeat: repeat-y;
        }

2. Dalam hal ini gambar diulang baik secara horizontal maupun vertikal sehingga masing-masing dalam arah x dan arah y hingga memenuhi ruang

section {
    background-repeat: no-repeat;
        }

Nilai

section {
    background-repeat: repeat-y;
        }

_4 menghentikan gambar agar tidak berulang dari segala arah. Gambar hanya ditampilkan sekali

section {
    background-repeat: repeat-y;
        }

Nilai ini mengulangi gambar hanya secara horizontal di halaman. Gambar diulang di seluruh halaman, di

section {
    background-repeat: repeat-y;
        }

5.

section {
    background-repeat: repeat-y;
        }

_5 dalam matematika adalah dari kiri ke kanan

section {
    background-repeat: repeat-y;
        }

Nilai ini mengulangi gambar hanya secara vertikal di halaman. Gambar diulang ke bawah halaman, di

section {
    background-repeat: repeat-y;
        }

7.

section {
    background-repeat: repeat-y;
        }

_7 dalam matematika adalah dari atas ke bawah

Cara Mengatur Posisi Latar Belakang

Setelah menambahkan gambar latar belakang dan menghentikannya agar tidak berulang, kami dapat lebih mengontrol tampilannya di dalam latar belakang tag dengan memperbaiki posisinya

Kami akan menggunakan properti

section {
    background-repeat: repeat-y;
        }

_9 untuk melakukan ini

Pemilih mengambil dua nilai. Yang pertama adalah untuk posisi horizontal, atau arah-x (seberapa jauh melintasi tag). Yang kedua adalah untuk posisi vertikal, atau arah y (seberapa jauh ke bawah tag)

Nilainya bisa berupa satuan, seperti sepasang piksel

section {
    background-position: 20px 30px;
        }

Ini akan memindahkan gambar 20px dan 30px ke bawah tag yang berisi

Alih-alih piksel, kita dapat menggunakan sekumpulan kata kunci seperti kanan, kiri, atas, bawah, atau tengah untuk menempatkan gambar di kanan, kiri, atas, bawah, atau tengah tag

section {
    background-position: right center;
        }

Ini menempatkan gambar di sisi kanan tengah tag

Jika kami ingin memusatkannya secara horizontal dan vertikal, kami akan melakukan hal berikut

section {
    background-position: center center;
        }

Untuk memposisikan gambar dengan detail yang lebih halus, perlu disebutkan bahwa kita dapat menggunakan persentase

section {
    background-position: 20% 40%;
        }

Ini memposisikan gambar 20% di sepanjang tag dan 40% di bawah tag

Sejauh ini kita telah melihat nilai yang digunakan dalam kombinasi, tetapi kita juga dapat menentukan satu nilai seperti

section {
    background-repeat: repeat-y;
        }

0 atau

section {
    background-repeat: repeat-y;
        }

1 atau

section {
    background-repeat: repeat-y;
        }

2, yang berlaku untuk kedua arah

Cara Mengubah Ukuran Gambar Latar Belakang

Untuk mengontrol ukuran gambar background kita bisa menggunakan properti background-size

Sekali lagi, seperti properti sebelumnya yang disebutkan, dibutuhkan dua nilai. Satu untuk ukuran horizontal (x) dan satu untuk ukuran vertikal (y).

Kita bisa menggunakan piksel, seperti itu

section {
    background-size: 20px 40px;
    /* sizes the image 20px across and 40px down the page */
        }

Jika kita tidak tahu persis lebar wadah tempat kita menyimpan gambar, ada sekumpulan nilai spesifik yang bisa kita berikan pada properti

• section {
      background-repeat: repeat-y;
          }
  

  _3 mengubah ukuran gambar latar belakang sehingga menutupi seluruh ruang latar belakang tag terlepas dari lebar tag. Jika gambar terlalu besar dan memiliki rasio yang lebih besar dari tag yang ada di dalamnya, ini berarti gambar akan meregang dan karena itu terpotong di tepinya

• section {
      background-repeat: repeat-y;
          }
  

  _4 berisi gambar, seperti namanya. Ini akan memastikan seluruh gambar ditampilkan di latar belakang tanpa memotongnya. Jika gambar jauh lebih kecil dari tag akan ada ruang kosong yang membuatnya berulang untuk mengisinya, jadi kita bisa menggunakan aturan

  section {
      background-repeat: repeat-y;
          }
  

  5 yang telah kita sebutkan sebelumnya

Aturan

section {
    background-repeat: repeat-y;
        }

_6 dalam hal ini akan memotong bagian gambar

Ketika kami mengubahnya menjadi

section {
    background-repeat: repeat-y;
        }

_7 kami melihat bahwa gambar menyusut agar sesuai dengan tag bagian

Cara Menggunakan Properti Lampiran Latar Belakang

Dengan properti

section {
    background-repeat: repeat-y;
        }

_8 kita dapat mengontrol di mana gambar latar belakang dilampirkan, artinya gambar tetap atau tidak ke browser

Nilai defaultnya adalah

section {
    background-repeat: repeat-y;
        }

_9, di mana gambar latar tetap dengan tagnya dan mengikuti aliran alami halaman dengan menggulir ke atas dan ke bawah saat kami menggulir ke atas dan ke bawah

Nilai kedua yang dimiliki properti adalah

section {
    background-position: 20px 30px;
        }

0
Ini membuat gambar latar belakang tetap pada posisi yang sama, tetap pada halaman dan tetap pada viewport browser. Ini menciptakan efek paralaks yang dapat Anda lihat contohnya di sini

Lihat Pena oleh Dionysia Lemonaki (@deniselemonaki) di CodePen

Gradien Latar Belakang

Kasus penggunaan yang berbeda untuk properti

section {
    background-repeat: repeat;
        }

_9 adalah untuk memberi tahu browser untuk membuat gradien

section {
    background-repeat: repeat;
        }

9 dalam hal ini tidak memiliki URL, melainkan gradien linier

Cara paling sederhana untuk melakukannya adalah dengan menentukan sudutnya. Ini mengontrol arah gradien dan bagaimana warna akan berbaur. Terakhir tambahkan dua warna yang ingin Anda gabungkan bersama dalam gradien untuk latar belakang tag

Gradien yang bergerak dari atas ke bawah dan dari hitam ke putih adalah

section {
    background-repeat: repeat;
        }

0

Derajat yang paling umum digunakan untuk gradien adalah

• section {
      background-position: 20px 30px;
          }
  

  _3 dari atas ke bawah

• section {
      background-position: 20px 30px;
          }
  

  _4 dari kiri ke kanan

• section {
      background-position: 20px 30px;
          }
  

  _5 dari bawah ke atas

• section {
      background-position: 20px 30px;
          }
  

  _6 dari kanan ke kiri

Derajat di atas masing-masing sesuai dengan

section {
    background-position: 20px 30px;
        }

_7,

section {
    background-position: 20px 30px;
        }

8,

section {
    background-position: 20px 30px;
        }

9 dan

section {
    background-position: right center;
        }

0, masing-masing

section {
    background-repeat: repeat;
        }

_1

Lihat Pena oleh Dionysia Lemonaki (@deniselemonaki) di CodePen

Alih-alih warna kata kunci, kita dapat menggunakan warna hex agar lebih khusus dan memiliki pilihan yang lebih luas

section {
    background-repeat: repeat;
        }

_2

Lihat Pena oleh Dionysia Lemonaki (@deniselemonaki) di CodePen

Kami juga dapat menyertakan lebih dari dua warna dalam gradien, menciptakan efek dan skema warna yang berbeda

Kesimpulan

Ini menandai akhir dari pengenalan sintaks dasar properti

section {
    background-repeat: repeat;
        }

9

Dari sini kemungkinannya tidak terbatas dan menyisakan ruang untuk banyak ekspresi kreatif. Efek ini membantu pengguna mendapatkan pengalaman yang menyenangkan saat mengunjungi situs web Anda

Saya harap ini bermanfaat, dan terima kasih telah membaca

Bersenang-senanglah dengan desain Anda dan selamat membuat kode

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

---

Dionysia Lemonaki

Mempelajari sesuatu yang baru setiap hari dan menulis tentangnya

---

Jika artikel ini bermanfaat, tweetlah

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara mendapatkan gambar latar belakang dalam HTML?

Apa perintah untuk latar belakang dalam HTML?

Bagaimana cara mengatur gambar latar belakang dalam HTML CSS?

Bagaimana Anda menempatkan gambar latar belakang di belakang teks dalam HTML?