هناك خطب النص لم يوضع داخل الصوره

المشكلة هي وضع الصورة ك background-image مع عدم وضع position للنص، مما جعل النص خارج الصورة لذا يجب إما إضافة position للنص كالتالي:

.content { position: relative; }
.content p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

أو استخدام img بدل background-image لوضع النص داخل نفس ال container.

من المفترض أن يظهر النص فوق الصورة لأن عنصر p هو إبن للعنصر div وبما أن div هو الحاوي للصورة فلهذا يجب أن يظهر النص فوق الصورة.

يبدواأنه توجد مشكلة لديك في التنسيقات يرجى إرفاق الملفات هنا للإطلاع عليها.

ولكن يمكنك إستخدام الخاصية position إذا أردت لتغير الوضع هكذا :

.content {
    position: relative;
    background-image: url(image.jpg);
    width: 500px;
    height: 500px;
}

.content p {
    position: absolute;
    top: 0;
    left: 0;
}

الخطأ موجود في تنسيقات CSS وعندما نلقي نظرة على الكود، نجد:

.content{
    background-image: url(images/camping-on-top-of-the-mountain-during-sunset-free-photo.webp);
    width: 500px;
    height: 500px;
}

المشكلة هنا أن النص والصورة يتنافسان على نفس المساحة، وبما أن الصورة تم تعيينها ك background-image، فهي تظهر خلف كل شيء والحل البسيط هو إضافة padding للعنصر content لإعطاء مساحة للنص:

.content{
    background-image: url(images/camping-on-top-of-the-mountain-during-sunset-free-photo.webp);
    width: 500px;
    height: 500px;
    padding-top: 30px;
}

.content p {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px;
    text-align: center;
}