Latest web development tutorials

Backgrounds CSS (Background)

latar belakang properti CSS digunakan untuk mendefinisikan latar belakang elemen HTML.

properti CSS mendefinisikan efek latar belakang:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background Color

Properti background-color mendefinisikan warna latar belakang dari elemen.

warna latar belakang halaman untuk digunakan dalam pemilih tubuh:

contoh

body {background-color:#b0c4de;}

Coba »

CSS, nilai warna biasanya didefinisikan dengan cara berikut:

  • Hex - seperti: "# ff0000"
  • RGB - seperti: "rgb (255,0,0)"
  • nama warna - seperti: "red"

Contoh berikut, h1, p, dan elemen div memiliki warna latar belakang yang berbeda:

contoh

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Coba »

gambar latar belakang

atribut background-image menggambarkan elemen gambar latar belakang.

Secara default, gambar latar belakang ubin berulang kali ditampilkan untuk menutupi seluruh badan elemen.

Halaman contoh pengaturan gambar latar belakang:

contoh

body {background-image:url('paper.gif');}

Coba »

Berikut adalah contoh dari kombinasi buruk teks dan gambar latar belakang. Teks pembacaan miskin:

contoh

body {background-image:url('bgdesert.jpg');}

Coba »

gambar latar belakang - horizontal atau vertikal ubin

Secara default, properti background-image ubin dalam orientasi horizontal atau vertikal halaman.

Jika beberapa gambar ubin horizontal dan vertikal, sehingga terlihat sangat terkoordinasi, sebagai berikut:

contoh

body
{
background-image:url('gradient2.png');
}

Coba »

Jika ubin gambar (mengulang-x) hanya dalam arah horisontal, latar belakang halaman akan lebih baik:

contoh

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Coba »

Background Image - Mengatur posisi dan tidak ubin

ucapan Biarkan gambar latar belakang tidak mempengaruhi tata letak teks

Jika Anda tidak ingin ubin gambar, Anda dapat menggunakan properti background-repeat:

contoh

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Coba »

Contoh di atas, gambar latar belakang dan teks muncul di lokasi yang sama, untuk membuat tata letak halaman yang lebih masuk akal, tidak mempengaruhi pembacaan teks, kita dapat mengubah lokasi gambar.

Properti background-position dapat digunakan untuk mengubah gambar dalam latar belakang di sini:

contoh

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Coba »

Latar Belakang - properti singkat

Dalam contoh di atas, kita dapat melihat warna latar belakang halaman melalui banyak atribut untuk mengontrol.

Untuk menyederhanakan kode untuk sifat ini, kita dapat menggunakan atribut ini digabungkan di properti yang sama.

warna latar belakang properti singkat untuk "background":

contoh

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Coba »

Bila menggunakan properti singkat, urutan nilai atribut ::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Semua atribut ini tidak perlu menggunakan, Anda dapat menggunakan sesuai dengan kebutuhan sebenarnya dari halaman.

Contoh ini menggunakan CSS dijelaskan sebelumnya, Anda dapat melihat contoh: Contoh CSS

contoh

contoh yang lebih

Bagaimana mengatur gambar latar belakang tetap
Contoh ini menunjukkan bagaimana untuk mengatur gambar latar belakang tetap. Gambar tidak akan gulir dengan sisa halaman.

latar belakang properti CSS

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。