Gambar Latar Belakang Tubuh Dilakukan Dengan Mudah

html

Fitur bagus yang akan Anda temukan di banyak situs adalah di mana area konten tengah tampak menutupi halaman dengan bayangan jatuh di belakangnya. Ini sebenarnya metode yang cukup sederhana untuk membuat blog Anda terlihat bagus (atau situs web lain) dengan satu gambar latar belakang.

Bagaimana ini dilakukan?

  1. Cari tahu seberapa luas konten Anda. Contoh: 750px.
  2. Bangun gambar dalam aplikasi ilustrasi Anda (saya menggunakan Illustrator) lebih lebar dari pada area konten. Contoh: 800px.
  3. Atur latar belakang gambar ke latar belakang yang Anda inginkan di setiap sisi blog.
  4. Tambahkan area putih di atas latar belakang.
  5. Terapkan bayangan pada area putih yang keluar dari kedua sisi area.
  6. Atur lebar area krop dengan tinggi 1 piksel. Ini akan membuat gambar yang diunduh bagus dan ringkas untuk rendering cepat.
  7. Keluarkan gambar.

Inilah cara saya membangunnya menggunakan Illustrator (perhatikan bahwa saya memiliki area tanaman yang jauh lebih tinggi… itu hanya agar Anda dapat melihat apa yang saya lakukan):
Latar belakang dengan Illustrator

Berikut adalah contoh bagaimana output akan terlihat dengan gambar latar belakang:
Contoh Gambar Latar Belakang

Berikut cara menerapkan gambar menggunakan tag gaya tubuh Anda di CSS file.

background: # B2B2B2 url ('images / bg.gif') repeat-y center;

Berikut adalah pembedahan dari tag gaya latar belakang:

  • #B2B2B2 – mengatur warna latar belakang halaman secara keseluruhan. Dalam contoh ini, abu-abu untuk mencocokkan abu-abu pada gambar latar belakang.
  • url('images/bg.gif') – mengatur gambar latar belakang yang ingin Anda gunakan.
  • repeat-y - mengatur gambar untuk diulang pada sumbu y. Jadi gambar latar belakang akan berulang dari atas ke bawah halaman.
  • center - mengatur gambar di tengah halaman.

Bagus dan mudah… satu gambar, satu tag gaya!

2 Komentar

  1. 1
  2. 2

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.