Cara Menempatkan Latar Belakang Di Halaman Anda

Daftar Isi:

Cara Menempatkan Latar Belakang Di Halaman Anda
Cara Menempatkan Latar Belakang Di Halaman Anda

Video: Cara Menempatkan Latar Belakang Di Halaman Anda

Video: Cara Menempatkan Latar Belakang Di Halaman Anda
Video: Cara Menambahkan Latar Belakang Gambar Pada Dokumen Word 2007 2024, Mungkin
Anonim

Menempatkan gambar latar belakang di situs web adalah urusan lima menit. Lebih banyak waktu dihabiskan untuk menyiapkan gambar - pemilihan, penyesuaian, penambahan efek, menyusun beberapa ilustrasi menjadi satu file grafik.

Cara menempatkan latar belakang di halaman Anda
Cara menempatkan latar belakang di halaman Anda

instruksi

Langkah 1

Atribut latar belakang bertanggung jawab untuk mengelola latar belakang. Untuk mengisi halaman secara merata dengan satu warna, gunakan tag gaya di badan:. Latar belakang akan menjadi hitam. Jika menggunakan CSS, taruh di head: body {background-color: # 000000;}

Langkah 2

Dengan bantuan tautan, gambar berulang diatur. Alamat ditentukan sebagai tautan eksternal atau internal. Saat menggunakan metode ini, penting agar jahitan di antara gambar tetap tidak terlihat, jika tidak halaman akan terlihat tidak rapi. Di CSS, gunakan: body {background-color: # 000000; background-image: url (images / pattern.png);}.

Langkah 3

Pengulangan pola dapat dikendalikan. Pengulangan latar belakang bertanggung jawab untuk fungsi ini bersama dengan elemen-elemen berikut: - ulangi-x - pengulangan horizontal; - ulangi-y - pengulangan vertikal: - ulangi - pengulangan di kedua arah; - tanpa pengulangan - tanpa pengulangan. Sudah diatur seperti ini: body {background-color: # 000000; background-image: url("butterfly.gif"); background-repeat: tidak-ulangi; }

Langkah 4

Posisi latar belakang membantu memposisikan gambar di bagian halaman web yang diinginkan. Koordinat dapat diatur menggunakan persentase (50% 75%), sentimeter (5cm 5cm), aspek piksel (200px 400px), bentuk kata (kiri, kanan, atas, tengah, bawah). Misalnya: body {background-color: # 000000; background-image: url("butterfly.gif"); background-repeat: tidak-ulangi; lampiran-latar belakang: diperbaiki; background-position: kiri bawah; } Nilai 0% 0% sama dengan kiri atas.

Langkah 5

Properti background-attachment menentukan apakah gambar di-scroll bersama halaman (background-attachment: scroll) atau tidak (background-attachment: fixed).

Direkomendasikan: