عدم ظهور الصورة بالمتصفح باستخدام الخاصية background في css

يُرجى توضيح هيكلية الملفات في المجلد الذي تعمل عليه، إضغط على أيقونة الملفات في vscode حتى تظهر الهيكلية وقم بأخذ لقطة شاشة توضح الهيكلية بشكل كامل مع مكان تواجد الصورة.

أيضاً يرجى توضيح كود ال css الخاص بتنسيقات الخلفية، و طريقة إستعراضك للمشروع عندما تحدث المُشكلة، أي الرابط الذي تفتحه

غالباً تكون المُشكلة لديك بسبب مسار الصورة حاول إستخدام مسار نسبي يبدأ من ملف التنسيقات وصولاً إلى ملف الصورة:

بفرض أن هيكلية الملفات لديك:

css
   - style.css
img
   - test.png
index.html

في هذه الحالة ستكتب بداخل الدالة url:

url('../img/test.png')

و ../ تعني إصعد من المجلد الحالي للملف إلى المجلد الأب، أي مجلد المشروع ثم أدخل للمجلد img ستجد ملف صورة بالإسم test.png.

و هذا ما أعتقد أنه لديك كهيكلية، أعتقد أنه لديك ملف html في مجلد المشروع بالإضافة لمجلد فيه ملفات css و مجلد فيه الصور، عند تشغيل المشروع عبر الإضافة فهو يبدأ الخادم في المجلد الحاوي لملف html و / تعني ذلك المجلد، بالتالي مسار الصورة يكون صحيح. أما عندما تستعرض المشروع عبر فتح ملف html مباشرةً تُصبح / لا تُعبر عن جذر المشروع بل شيء آخر في ملفات النظام.

بتاريخ 48 دقائق مضت قال سمير عبود:

يُرجى توضيح هيكلية الملفات في المجلد الذي تعمل عليه، إضغط على أيقونة الملفات في vscode حتى تظهر الهيكلية وقم بأخذ لقطة شاشة توضح الهيكلية بشكل كامل مع مكان تواجد الصورة.

أيضاً يرجى توضيح كود ال css الخاص بتنسيقات الخلفية، و طريقة إستعراضك للمشروع عندما تحدث المُشكلة، أي الرابط الذي تفتحه

جلست ادقق بالموضوع وجدت انه الخلل كله من المسار تبع ملف "css"  فقط عندما اضع ملف "css" بمجلد كما في الصورة لاتعمل الصورة والباقي يعمل طبيعي ولكن اذا اخرجته من المجلد ووضعته بجانب صفحه "html" يشتعل طبيعي بدون مشاكل،،،،واما قصة السلاش "/" وجدت انه من اللازم عدم وضعه في بدايه المسار مما يجعل المتصفح  لايستطيع التعرف على المسار،،،،فهل هناك حل لمشكلة المسار لملف "css"مع العلم ان ملف js  متعرف ومضمن والاكواد شغاله و الصورة داخل مجلد ايضاً،، ويشتغل الكود  ;background: url('pic/pimg.jpg') no-repeat فقط في حاله وضعت "css"  بجانب ملف "html"... هل يوجد حل للمشكلة

بتاريخ 10 دقائق مضت قال Abdu Maher:

جلست ادقق بالموضوع وجدت انه الخلل كله من المسار تبع ملف "css"  فقط عندما اضع ملف "css" بمجلد كما في الصورة لاتعمل الصورة والباقي يعمل طبيعي ولكن اذا اخرجته من المجلد ووضعته بجانب صفحه "html" يشتعل طبيعي بدون مشاكل،،،،واما قصة السلاش "/" وجدت انه من اللازم عدم وضعه في بدايه المسار مما يجعل المتصفح  لايستطيع التعرف على المسار،،،،فهل هناك حل لمشكلة المسار لملف "css"مع العلم ان ملف js  متعرف ومضمن والاكواد شغاله و الصورة داخل مجلد ايضاً،، ويشتغل الكود  ;background: url('pic/pimg.jpg') no-repeat فقط في حاله وضعت "css"  بجانب ملف "html"... هل يوجد حل للمشكلة

لقد عدلت الإجابة السابقة و هي تحوي الحل للمُشكلة فقط عليك تعديل المسار الذي تضعه بداخل الدالة url ليُصبح مساراً نسبياً:

url('../pic/pimg.jpg')

بتاريخ 4 دقائق مضت قال سمير عبود:

لقد عدلت الإجابة السابقة و هي تحوي الحل للمُشكلة فقط عليك تعديل المسار الذي تضعه بداخل الدالة url ليُصبح مساراً نسبياً:

url('../pic/pimg.jpg')

مشكووووووور اخي تسلم ضبطت معي