طلب كود css ايطار كامل للبيانات الشخصيه

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

اريد جعل هذه الصوره ايطار كامل للبيانات الشخصيه
في المواضيع البيانات الشخصيه فقط يعني الرمزيه
والاسم و اللقب يكونو خارج الايطار و يكون الكود css

الصوره المطلوب عمل الكود عليها :


@omarpop23
@كونان2000

وشكرا لكم مقدما

اول شيء قم بتفريغ الصورة اريد الخلفيه شفافة
ثاني شيئ ارفق رابط الموقع المراد وضع الصورة فيه

omarpop23 كتب:اول شيء قم بتفريغ الصورة اريد الخلفيه شفافة
ثاني شيئ ارفق رابط الموقع المراد وضع الصورة فيه

شكرا لردك اخي @omarpop23
انا ارى انه مافي داعي لتفريغ الصوره و جعلها شفافه
لان الستايل اللي حتركب عليه نفس لون خلفية الصوره
https://q-wda3-test.yoo7.com/

وعليكم السلام  @أفندينا
حسب ما فهمت
جرب التالي بالcss

الكود:

pan.postdetails.poster-profile {
    background: url(https://i30.servimg.com/u/f30/20/35/61/89/animat12.jpg) center top no-repeat, url(https://i30.servimg.com/u/f30/20/35/61/89/animat13.jpg) center bottom no-repeat;
    padding-top: 44%;
    padding-bottom: 30%;
    background-size: 100%;
}

كونان2000 كتب:وعليكم السلام  @أفندينا
حسب ما فهمت
جرب التالي بالcss

الكود:

pan.postdetails.poster-profile {
    background: url(https://i30.servimg.com/u/f30/20/35/61/89/animat12.jpg) center top no-repeat, url(https://i30.servimg.com/u/f30/20/35/61/89/animat13.jpg) center bottom no-repeat;
    padding-top: 44%;
    padding-bottom: 30%;
    background-size: 100%;
}

لا يعمل الكود اخي

@أفندينا
انا سجلت عندك
فعل اشتراكي
ممكن

كونان2000 كتب:@أفندينا
انا سجلت عندك
فعل اشتراكي
ممكن

تم التفعيل

جرب التالي مكان السابق

الكود:

span.postdetails.poster-profile {
    background: url(https://i30.servimg.com/u/f30/20/35/61/89/animat12.jpg) center top no-repeat, url(https://i30.servimg.com/u/f30/20/35/61/89/animat13.jpg) center bottom no-repeat!important;
    background-size: 100% !important;
    padding-top: 44%!important;
    padding-bottom: 30%!important;
}

كونان2000 كتب:جرب التالي مكان السابق

الكود:

span.postdetails.poster-profile {
    background: url(https://i30.servimg.com/u/f30/20/35/61/89/animat12.jpg) center top no-repeat, url(https://i30.servimg.com/u/f30/20/35/61/89/animat13.jpg) center bottom no-repeat!important;
    background-size: 100% !important;
    padding-top: 44%!important;
    padding-bottom: 30%!important;
}

ظابت بس فيه مشكله
الرمزيه و اللقب داخل الايطار وانا عاوزهم خارجه

جرب التالي مكان اسابق

الكود:

span.postdetails.poster-profile {
    background: url(https://i.servimg.com/u/f30/20/35/61/89/animat13.jpg) center bottom no-repeat!important;
    background-size: 100%!important;
    padding-bottom: 30%!important;
    padding-top: 4%!important;
}
.postprofile-contactt {
    background: url(https://i30.servimg.com/u/f30/20/35/61/89/animat12.jpg) center top no-repeat!important;
    background-size: 100% !important;
    padding-top: 44%!important;
    padding-bottom: 0%!important;
}
span.postdetails.poster-profile {
    background-color: #e8e1d1 !important;
}


كونان2000 كتب:جرب التالي مكان اسابق

الكود:

span.postdetails.poster-profile {
    background: url(https://i.servimg.com/u/f30/20/35/61/89/animat13.jpg) center bottom no-repeat!important;
    background-size: 100%!important;
    padding-bottom: 30%!important;
    padding-top: 4%!important;
}
.postprofile-contactt {
    background: url(https://i30.servimg.com/u/f30/20/35/61/89/animat12.jpg) center top no-repeat!important;
    background-size: 100% !important;
    padding-top: 44%!important;
    padding-bottom: 0%!important;
}
span.postdetails.poster-profile {
    background-color: #e8e1d1 !important;
}


تماااااام كدا مظبوط ميه في الميه
شكرا لك اخي @كونان2000