لماذا تظهر الصورة في الخلف؟

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

بخصوص تموضع الصورة في الخلف أو الأمام، فذلك يتم من خلال قيمة z-index عليك إعطائها رقم أكبر لتظهر في الأمام، ولكن يجب تحديد قيمة لخاصية position للصورة أي كالتالي:

img {
  position: absolute;
  z-index: 10;
}

وعليكم السلام ورحمة الله,

من ناحية الخلفية فيجب عليك تنزيلها بصيغة ال png وهي صيغة الصور التي تأتي مفرغة من الخلفية,

لجعلها في المقدمة علينا رفع قيمة z-index علينا برفعها إلى أن تظهر بالأمام.

example {
  position: relative;
  z-index: 5;
}

اذا لم تظهر للأمام عليك رفع قيمة ال z-index للأعلى إلى أن تظهر أي يعني قيمة أكبر من ال 5 مثلا.

صورة الحذاء تظهر بخلفية زرقاء خافتة لأنه على الأغلب امتدادها ليس بصيغة png لذا يمكنك الاعتماد على إحدى المواقع لتحويل صيغ الصور وليكن مثلا iloveimg يمكنك التعديل على الصيغة أو اختيار صورة أخرى بدون خلفية.

أما لجعلها في المقدمة وليس في الخلفية توجد خاصية تسمى z-index يمكن التلاعب بقيمها من خلال رفعها كي ترتفع الصورة إلى المقدمة والعكس صحيح كالتالي:

img {
  position: relative;
  z-index: 8;
}

بحيث تكون قيمة z-index أعلى من قيم العناصر الأخرى.