CSS background-image - Apa penggunaan yang benar?

Apa penggunaan yang benar dari properti gambar latar CSS? Hal-hal kunci yang saya coba pahami adalah

1. Apakah itu perlu di kutip yaitu: background-image: url('images/slides/background.jpg');
2. Apakah bisa berupa jalur relatif (seperti di atas) atau haruskah itu URL lengkap?
3. Poin lain yang harus saya waspadai untuk memastikan itu berfungsi dengan benar di seluruh browser yang memenuhi standar.

Path bisa penuh atau relatif (tentu saja jika gambar dari domain lain itu harus penuh).

Anda tidak perlu menggunakan tanda kutip di URI; sintaksnya bisa:

background-image: url(image.jpg);

Atau

background-image: url("image.jpg");

Namun, dari W3 :

Beberapa karakter yang muncul dalam URI yang tidak dikutip, seperti tanda kurung, karakter spasi, tanda kutip tunggal (') dan tanda kutip ganda ("), harus diloloskan dengan garis miring terbalik sehingga nilai URI yang dihasilkan adalah token URI:' \ (', '\)'.

Jadi dalam hal seperti ini perlu menggunakan tanda kutip atau tanda kutip ganda, atau melarikan diri karakter.

1. Tidak, Anda tidak perlu penawaran.

2. Ya kamu bisa. Tetapi perhatikan bahwa URL relatif diselesaikan dari URL stylesheet Anda.

3. Lebih baik tidak menggunakan tanda kutip. Saya pikir ada klien yang tidak mengerti mereka.

1) menempatkan kutipan adalah kebiasaan yang baik

2) dapat berupa jalur relatif misalnya:

background-image: url('images/slides/background.jpg');

akan mencari folder gambar di folder tempat css dimuat. Jadi jika gambar berada di folder lain atau keluar dari pohon folder CSS Anda harus menggunakan path absolut atau relatif ke path root (dimulai dengan /)

3) Anda harus menggunakan deklarasi lengkap untuk gambar latar belakang untuk membuatnya berperilaku konsisten di seluruh browser yang memenuhi standar seperti:

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

Jalur relatif baik-baik saja dan kutipan tidak diperlukan. Hal lain yang dapat membantu adalah menggunakan properti "singkatan" backgrounduntuk menentukan warna latar belakang jika gambar tidak memuat atau tidak tersedia karena beberapa alasan.

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

Perhatikan juga bahwa Anda dapat menentukan apakah gambar akan diulang dan ke arah mana (jika Anda tidak menentukan, defaultnya adalah mengulang secara horizontal dan vertikal), dan juga lokasi gambar relatif terhadap wadahnya.

Jika gambar Anda berada di direktori terpisah file css Anda dan Anda ingin jalur relatif dimulai dari root situs web Anda:

background-image: url('/Images/bgi.png');

cukup periksa struktur direktori di mana tepatnya gambar seandainya Anda memiliki folder css dan folder gambar di luar folder css maka Anda harus menggunakan "../ images / image.jpg" dan itu akan berfungsi seperti yang terjadi pada saya, pastikan saja struktur direktori.

Anda benar-benar tidak perlu mengutip jika katakanlah menggunakan menggunakan gambar dari file css Anda bisa

{background-image: url(your image.png/jpg etc);}

Anda tidak perlu menggunakan kutipan dan Anda dapat menggunakan jalur apa pun yang Anda suka!

Lihatlah halaman referensi sitepoint masing-masing untuk gambar latar belakang dan URI

1. Itu tidak harus dalam tanda kutip tetapi dapat menggunakannya jika Anda suka. (Saya pikir IE5 / Mac tidak mendukung tanda kutip tunggal).
2. Baik relatif dan absolut dimungkinkan; path relatif adalah relatif terhadap path file css.

cukup tulis di file css Anda seperti di bawah ini

background:url("images/logo.jpg")