Cara Mengatur Gambar Latar Belakang di CSS

Membuat situs web adalah cara yang bagus untuk mengekspresikan diri. Meskipun ada banyak alat pembuatan situs web, menulisnya sendiri adalah cara yang menyenangkan untuk mempelajari lebih lanjut tentang cara kerja situs web di balik layar. Proyek pemula yang baik adalah membuat situs web dan menambahkan gambar latar belakang dengan CSS. Proyek ini akan membuat Anda aktif dan berjalan dengan HTML dan CSS.

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheet. Ini adalah bahasa pemrograman yang memungkinkan Anda untuk mengatur gaya bahasa markup. Salah satu bahasa markup tersebut adalah HTML atau Hyper-Text Markup Language. HTML digunakan untuk membuat website. Meskipun Anda dapat mengontrol beberapa gaya situs web menggunakan HTML, CSS menawarkan lebih banyak pilihan kontrol dan desain.

Membuat Website Dasar Dengan HTML

Karena CSS hanyalah bahasa gaya, untuk menggunakannya, pertama-tama kita membutuhkan sesuatu untuk ditata. Situs web yang sangat mendasar akan cukup bagi kita untuk mulai bermain dengan CSS. Halaman kami akan menampilkan 'Hello World.'

  
  
  
  
 Hello World

Jika Anda tidak terbiasa dengan HTML, mari kita cepat membahas apa yang dilakukan semua elemen. Seperti disebutkan, HTML adalah bahasa markup, yang berarti menggunakan tag untuk menandai teks. Setiap kali Anda melihat sebuah kata dikelilingi oleh itu adalah tanda. Ada dua jenis tag, tag yang menandai awal penggunaan bagian dan tag yang menandai akhir bagian menggunakan . Teks di dalam bagian juga dimaksudkan untuk membuat perbedaan ini lebih mudah dilihat.

Dalam contoh kami, kami memiliki empat tag. NS html tag menunjukkan elemen mana yang merupakan bagian dari situs web. NS kepala tag berisi informasi header yang tidak ditampilkan pada halaman tetapi diperlukan untuk membuat halaman. Semua elemen yang ditampilkan berada di antara tubuh tag. Kami hanya memiliki satu elemen yang ditampilkan, yaitu P menandai. Ini memberitahu browser web bahwa teks adalah sebuah paragraf.

Terkait: 10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Menambahkan CSS ke HTML

Sekarang kita memiliki halaman sederhana, kita dapat menyesuaikan gaya dengan CSS. Halaman kita sekarang cukup sederhana, dan tidak banyak yang bisa kita lakukan, tapi mari kita mulai dengan membuat paragraf kita menonjol sehingga kita bisa membedakannya dari latar belakang dengan menambahkan batas.

  
  
  
  
 Hello World

Sekarang, paragraf kita akan dikelilingi oleh batas hitam. Menambahkan deskripsi gaya dalam CSS ke tag paragraf kami memberi tahu situs web cara menata paragraf. Kami dapat menambahkan lebih banyak deskripsi. Mari tingkatkan spasi putih, atau padding, di sekitar paragraf kita dan pusatkan teks kita.

  
  
  
  
 Hello World

Situs web kami terlihat lebih baik, tetapi HTML kami mulai terlihat berantakan dengan semua deskripsi di tag paragraf. Kita dapat memindahkan informasi ini ke header kita. Header kami adalah untuk informasi yang kami butuhkan untuk menampilkan situs web dengan benar.

  
  
  
 p {  
 text-align: center  
 }  
 #ourParagraph {  
 border-style: solid;  
 padding: 30px;  
 }  
  
  
  
 Hello World

Sekarang HTML kita lebih mudah dibaca. Anda akan melihat bahwa kami memang harus mengubah beberapa hal. Tag gaya memberi tahu informasi gaya peramban web, tetapi juga apa yang harus ditata juga. Dalam contoh kami, kami telah menggunakan dua cara berbeda untuk memberi tahu apa yang harus ditata. NS P di tag gaya memberi tahu browser web untuk menerapkan gaya itu ke semua tag paragraf. NS #paragraf kami bagian memberitahunya untuk hanya menata elemen dengan id paragraf kami . Perhatikan itu Indo informasi ditambahkan ke tag p di tubuh kita.

cara memposting anonim di facebook

Mengimpor File CSS ke Situs Web Anda

Menambahkan informasi gaya ke header membuat kode kita lebih mudah dibaca. Namun, jika kita ingin menata banyak halaman berbeda dengan cara yang sama, kita harus menambahkan teks itu ke bagian atas setiap halaman. Itu mungkin tidak tampak seperti banyak pekerjaan, Anda dapat menyalin dan melewatinya, tetapi itu menciptakan banyak pekerjaan jika Anda ingin mengubah elemen nanti.

Sebagai gantinya, kita akan menyimpan informasi CSS dalam file terpisah dan mengimpor file untuk menata halaman. Salin dan tempel informasi di antara tag gaya ke file CSS baru file CSS kita.css .

p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Kemudian, impor file ke file HTML.

  
  
  
  
  
 Hello World

Menambahkan Gambar Latar Belakang Dengan CSS

Sekarang Anda memiliki dasar yang kuat dalam HTML dan CSS, menambahkan gambar latar belakang akan menjadi hal yang mudah. Pertama, identifikasi elemen apa yang ingin Anda beri gambar latar belakang. Dalam contoh kami, kami akan menambahkan latar belakang ke seluruh halaman. Ini berarti bahwa kami ingin mengubah gaya tubuh . Ingat, tag tubuh berisi semua elemen yang terlihat.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Untuk mengubah gaya tubuh di CSS, pertama-tama gunakan tubuh kata kunci. Kemudian tambahkan tanda kurung kurawal seperti yang kita lakukan sebelumnya {}. Semua informasi gaya untuk badan harus berada di antara tanda kurung kurawal. Atribut style yang ingin kita ubah adalah gambar latar belakang . Ada banyak atribut gaya. Jangan berharap untuk menghafal semuanya. Tandai lembar contekan properti CSS dengan atribut yang ingin Anda ingat.

Terkait: 8 Efek HTML Keren yang Dapat Ditambahkan Siapa Saja ke Situs Web Mereka

masukkan kotak teks di google docs

Setelah atribut, gunakan titik dua untuk menunjukkan bagaimana Anda akan mengubah atribut. Untuk mengimpor gambar, gunakan url() . ini menunjukkan bahwa Anda menggunakan tautan untuk menunjuk ke gambar. Tempatkan lokasi file dalam tanda kurung di antara tanda kutip. Terakhir, akhiri baris dengan titik koma. Meskipun spasi putih tidak memiliki arti dalam CSS, gunakan lekukan untuk membuat CSS lebih mudah dibaca.

Contoh kita terlihat seperti ini:

Jika gambar Anda tidak ditampilkan dengan benar karena ukuran gambar, Anda dapat mengubah gambar secara langsung. Namun, ada atribut gaya latar belakang di CSS yang dapat Anda gunakan untuk mengubah latar belakang. Gambar yang lebih kecil dari latar belakang secara otomatis akan diulang di latar belakang. Untuk mematikannya, tambahkan latar belakang-ulangi:jangan ulangi; ke elemen Anda.

Ada juga dua cara untuk membuat gambar menutupi seluruh latar belakang. Pertama, Anda dapat mengatur ukuran latar belakang ke ukuran layar dengan ukuran latar belakang: 100% 100%; , tetapi ini akan meregangkan gambar dan mungkin terlalu mendistorsi gambar. Jika Anda tidak ingin proporsi gambar diubah, Anda juga dapat mengatur ukuran latar belakang ke menutupi . Cover akan membuat gambar background menutupi background, tetapi tidak mendistorsi gambar.

Mengubah Warna Latar Belakang

Mari kita ubah satu hal terakhir. Sekarang kita memiliki latar belakang, paragraf kita sulit dibaca. Mari kita buat latar belakangnya menjadi putih. Prosesnya mirip. Elemen yang ingin kita ubah adalah #ourParagraph. Tanda # menunjukkan bahwa 'ourParagraph' adalah nama id. Selanjutnya, kita ingin mengatur warna latar belakang atribut untuk putih.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 background-color: white;  
 border-style: solid;  
 padding: 30px;  
}

Jauh lebih baik.

Melanjutkan Mendesain Situs Web Anda Dengan CSS

Sekarang setelah Anda tahu cara mengubah gaya elemen HTML yang berbeda, langit adalah batasnya! Metode dasar untuk mengubah atribut gaya adalah sama. Identifikasi elemen yang ingin Anda ubah, dan jelaskan cara mengubah atribut tersebut. Cara terbaik untuk mempelajari lebih lanjut adalah dengan bermain-main dengan atribut yang berbeda. Tantang diri Anda untuk mengubah warna teks Anda selanjutnya.

Membagikan Membagikan Menciak Surel 8 Situs Terbaik untuk Contoh Pengkodean HTML Berkualitas

Ingin belajar HTML untuk membuat kode situs web dan aplikasi Anda sendiri? Gunakan contoh halaman web dan kode sumber ini untuk mempelajari HTML dan CSS sendiri.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
HTML
Desain web
CSS

Tentang Penulis Jennifer Seaton(21 Artikel Diterbitkan)

J. Seaton adalah Penulis Sains yang mengkhususkan diri dalam memecahkan topik yang kompleks. Dia memiliki gelar PhD dari Universitas Saskatchewan; penelitiannya berfokus pada pemanfaatan pembelajaran berbasis game untuk meningkatkan keterlibatan siswa secara online. Saat dia tidak bekerja, Anda akan menemukannya dengan membaca, bermain video game, atau berkebun.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan