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;
}
6Artikel 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 gunakanProperti CSS
section {
background-repeat: repeat;
}
9 memungkinkan Anda untuk kemudian menempatkan gambar di belakang elemen HTML apa pun yang Anda inginkanIni 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 iniUntuk menambahkan
section {
background-repeat: repeat;
}
_9 ke tag bagian di file section {
background-repeat: no-repeat;
}
4 Anda, tulis kode berikutsection {
background-image: url["images/sunset.png"];
}
Mari kita bahas apa yang terjadi di sini secara mendetail
2 menentukan tag yang ingin Anda tambahkan gambarsection { background-repeat: no-repeat; }
6 digunakan untuk memberi tahu CSS di mana gambar kita beradasection { background-repeat: no-repeat; }
- Di dalam tanda kurung,
7 adalah jalan menuju gambar. Ini memungkinkan browser mengetahui URL apa yang harus ditariksection { background-repeat: no-repeat; }
- Jalur dalam contoh ini disebut jalur
_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 jalursection { background-repeat: no-repeat; }
_9, yang merupakan alamat web lengkap dan dimulai dengan URL domain [section { background-repeat: no-repeat; }
0]section { background-repeat: repeat-y; }
- Menggunakan tanda kutip adalah kebiasaan yang baik tetapi kita dapat menghilangkannya, jadi
1 berfungsi samasection { background-repeat: repeat-y; }
- 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 bersamaansection {
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 ruangsection {
background-repeat: no-repeat;
}
Nilai
section {
background-repeat: repeat-y;
}
_4 menghentikan gambar agar tidak berulang dari segala arah. Gambar hanya ditampilkan sekalisection {
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 kanansection {
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 bawahCara 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 iniPemilih 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 arahCara 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
_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 tepinyasection { 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 aturansection { background-repeat: repeat-y; }
5 yang telah kita sebutkan sebelumnyasection { background-repeat: repeat-y; }
Aturan
section {
background-repeat: repeat-y;
}
_6 dalam hal ini akan memotong bagian gambarKetika kami mengubahnya menjadi
section {
background-repeat: repeat-y;
}
_7 kami melihat bahwa gambar menyusut agar sesuai dengan tag bagianCara 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 browserNilai 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 bawahNilai kedua yang dimiliki properti adalah
section {
background-position: 20px 30px;
}
0Ini 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 gradiensection {
background-repeat: repeat;
}
9 dalam hal ini tidak memiliki URL, melainkan gradien linierCara 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;
}
0Derajat yang paling umum digunakan untuk gradien adalah
_3 dari atas ke bawahsection { background-position: 20px 30px; }
_4 dari kiri ke kanansection { background-position: 20px 30px; }
_5 dari bawah ke atassection { background-position: 20px 30px; }
_6 dari kanan ke kirisection { background-position: 20px 30px; }
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-masingsection {
background-repeat: repeat;
}
_1Lihat 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;
}
_2Lihat 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;
}
9Dari 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
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