كيفية التحكم بخاصية التثبيت والتدرج الخطي للخلفية باستخدام CSS

موضع الخلفية (Background Position)

• توسيط الخلفية عموديًا باستخدام center vertically.


• توسيط الخلفية أفقيًا باستخدام center horizontally.


• توسيطها بالكامل عموديًا وأفقيًا معًا باستخدام center center.


• وضع الخلفية في أقصى اليسار أو اليمين باستخدام center left وcenter right.


• تحديد الموضع باستخدام النسب المئوية مثل 100% 100% أو 10% 20%.

خاصية تثبيت الخلفية (Background Attachment)

• fixed: تثبت الخلفية في مكانها، بحيث لا تتحرك مع النص عند التمرير.

      body {

        background-image: url('background.jpg');

        background-attachment: fixed;

      }

    

خاصية التدرج الخطي للخلفية (Background Image Linear Gradient)

• to bottom: التدرج من الأعلى إلى الأسفل.


• to left: التدرج من اليمين إلى اليسار.


• specific deg: تحديد الزاوية بالتدرج.

      div {

        background: linear-gradient(to bottom, #ff7e5f, #feb47b);

      }

    

تطبيق عملي

      section {

        background-image: linear-gradient(to bottom, #34ebd8, #0055a4);

        background-attachment: fixed;

        background-position: center center;

        height: 100vh;

        display: flex;

        justify-content: center;

        align-items: center;

      }

    

ابدأ الآن!