بقي لدي مشكلتين:
- اريد ان اتحكم بموقع الصورة أو
- اريد ان تغطي الصورة كامل الصفحة

للتحكم في موقع الصورة لديك الخاصية
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;
حيث القيمة الأولى للأعلى والاسفل والقيمة الثانية لليمين واليسار