للتحكم في موقع الصورة لديك الخاصية
background-position
وتحمل القيم
top - right - bottom - left

بقي ان نحدد حجم الصورة: background-size

وهناك طريقتين شائعين:
1- صيغة القيمتين: القيمة الأولى تحدد عرض الصورة، والثانية تحدد ارتفاعها.
مثل: background-size:300px 100px;

2- صيغة الكلمات المفتاحية: مثل "auto"، "cover"، و "contain".
حيث الفوارق بينها هي:

background-size:auto;

background-size:cover;

background-size:contain;

الخاصية الأخيرة لدينا من خواص الخلفية هنا هي
background-attachment

background-attachment تعني حرفيًا:
"كيف يتم إرفاق أو تثبيت الخلفية بالنسبة للمحتوى أو العنصر عند التمرير."

بمعنى: هل الخلفية تتحرك مع التمرير، أو تبقى ثابتة في مكانها، أو تتحرك فقط مع العنصر نفسه؟

بالتالي لها قيمتين:
1- background-attachment: fixed;
2- background-attachment: scroll;

تم تطبيق هذه الخصائص

للوصول إلى هذه النتيجة

تاليا نحتاج إلى بناء ال form بالمحتوى التالي:

كود الفورم كما تعلمنا في الـ HTML

نريد تنسيق الفورم لكن قبل ذلك يجب ان نناقش الخاصية الثالثة للعناصر وهو المسافات

spacing:
1- margin
2- padding

الهامش يعني خارج الصندوق
الحواف تعني المسافة داخل الصندوق

وكترتيب الحواف
top - right - bottom - left
اي عندما تكتب:
margin: 50px 10px 30px 10px;
فإنها ستاخذ ترتيب الاتجاهات بالضبط
واذا اردت ان يكون الاعلى والاسفل نفس القيمة واليمين واليسار نفس القيمة:
margin: 100px 150px 100px 150px;
ولمنع التكرار ستكتفي بكتابة:
margin: 100px 150px;
حيث القيمة الأولى للأعلى والاسفل والقيمة الثانية لليمين واليسار

هااام✨
يمكنك التحكم بالمتصفحات من جهة العرض (اليمين واليسار) لان العرض محدود بينما الارتفاع غير متوقع وعلى حسب التصميم سيمتد للاسفل بينما ان عرض الشاشة ثابت بالتالي هناك قيمة يمكن ان توسط العنصر في وسط الشاشة بالنسبة للعرض وهي auto
اي اذا اردت ان توسط عنصر في وسط الشاشة تماما فستجرب المقاس المناسب اعلى واسفل والعرض سيكون auto
margin 200px auto

الان بتطبيق الخواص السابقة على الفورم لعرض الحدود والخلفية واستدارة الحواف