Menggunakan URL relatif dalam file CSS, di mana lokasinya relatif?

Saat mendefinisikan sesuatu seperti URL gambar latar belakang dalam file CSS, saat menggunakan URL relatif, ke manakah relatifnya? Sebagai contoh:

Misalkan file tersebut /stylesheets/base-styles.cssberisi:

div#header { 
    background-image: url('images/header-background.jpg');
}

Jika saya termasuk stylesheet ini ke dalam dokumen yang berbeda melalui <link ... />akan URL relatif dalam file CSS menjadi relatif terhadap dokumen stylesheet di /stylesheets/atau relatif terhadap dokumen saat ini sudah termasuk ke? Jalur yang mungkin seperti:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

Menurut W3 :

URL parsial ditafsirkan relatif terhadap sumber lembar gaya, bukan relatif terhadap dokumen

Karena itu, dalam menjawab pertanyaan Anda, itu akan relatif terhadap /stylesheets/.

Jika Anda memikirkan hal ini, ini masuk akal, karena file CSS dapat ditambahkan ke halaman di direktori yang berbeda, jadi membakukannya ke file CSS berarti bahwa URL akan berfungsi di mana pun stylesheet terhubung.

Ini relatif terhadap file CSS.

Ini relatif terhadap stylesheet, tetapi saya sarankan untuk membuat URL relatif terhadap URL Anda:

div#header { 
  background-image: url(/images/header-background.jpg);
}

Dengan begitu, Anda dapat memindahkan file Anda tanpa perlu melakukan refactor di masa mendatang.

Untuk membuat lembaran gaya modular yang tidak bergantung pada lokasi absolut sumber daya, penulis dapat menggunakan URI relatif. URI relatif (sebagaimana didefinisikan dalam [RFC3986] ) diselesaikan untuk URI penuh menggunakan URI basis. RFC 3986, bagian 5, mendefinisikan algoritma normatif untuk proses ini. Untuk lembar gaya CSS, URI dasar adalah lembar gaya, bukan dari dokumen sumber.

Misalnya, anggap aturan berikut:

body { background: url("yellow") }

terletak di style sheet yang ditunjuk oleh URI:

http://www.example.org/style/basic.css

Latar belakang BODY dokumen sumber akan dilapisi dengan gambar apa pun yang dijelaskan oleh sumber daya yang ditunjuk oleh URI

http://www.example.org/style/yellow

Agen pengguna dapat bervariasi dalam cara mereka menangani URI yang tidak valid atau URI yang menunjuk sumber daya yang tidak tersedia atau tidak dapat diterapkan.

Diambil dari spec CSS 2.1 .

Untuk lembar gaya CSS, URI dasar adalah lembar gaya, bukan dari dokumen sumber.

(Ada lagi yang akan rusak, IMNSHO)

Salah satu masalah yang dapat terjadi, dan tampaknya memecah ini adalah ketika menggunakan minimisasi otomatis css. Jalur permintaan untuk bundel yang diperkecil dapat memiliki jalur yang berbeda dari css asli. Ini dapat terjadi secara otomatis sehingga dapat menyebabkan kebingungan.

Jalur permintaan yang dipetakan untuk bundel yang diperkecil haruslah "/ originalcssfolder / minifiedbundlename" bukan hanya "minifiedbundlename".

Dengan kata lain, beri nama bundel Anda untuk memiliki jalur yang sama (dengan /) sebagai struktur folder asli, dengan cara ini sumber daya eksternal seperti font, gambar akan dipetakan untuk mengoreksi URI oleh browser. Alternatifnya adalah dengan menggunakan url absolut (referensi dalam css Anda tetapi itu biasanya tidak diinginkan.

Ini berhasil untuk saya. menambahkan dua titik dan garis miring.

body{
    background: url(../images/yourimage.png);
}

Coba gunakan:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images sedang folder memegang gambar yang ingin Anda posting.