شرح شامل لخصائص الخلفية في CSS Background Properties
في هذا المقال سنغطي جميع خصائص الخلفية في CSS، والتي تتيح لك التحكم في لون الخلفية، الصور، حجمها، موقعها، تكرارها، أصلها، قصها، وحركتها مع التمرير، بالإضافة إلى الطريقة المختصرة لكتابتها. سنقدم أيضًا أمثلة عملية لكل قيمة متاحة.
1. background-color
تحدد لون خلفية العنصر. القيم الممكنة:
- أسماء الألوان مثل red , blue
- HEX مثل #ff0000
- RGB مثل rgb(255,0,0)
- RGBA مثل rgba(255,0,0,0.5)
- HSL مثل hsl(0,100%,50%)
- HSLA مثل hsla(0,100%,50%,0.5)
- transparent
- inherit
div { background-color: lightblue; }
2. background-image
تضيف صورة أو تدرج كخلفية. القيم الممكنة:
- none
- url("image.jpg")
- التدرجات مثل linear-gradient()
body { background-image: url("bg.jpg"); }
3. background-position
تحدد موقع الخلفية. القيم الممكنة:
- left , right , top , bottom , center
- قيم مئوية مثل 50% 50%
- قيم بوحدات مثل 20px 30px
body { background-position: center top; }
4. background-size
تحدد حجم الخلفية. القيم الممكنة:
- auto
- cover
- contain
- قيم محددة مثل 100px 200px
body { background-size: cover; }
5. background-repeat
تتحكم في تكرار الصورة. القيم الممكنة:
- repeat (افتراضي)
- repeat-x
- repeat-y
- no-repeat
- space
- round
body { background-repeat: no-repeat; }
6. background-origin
تحدد نقطة بداية الخلفية. القيم:
- padding-box (افتراضي)
- border-box
- content-box
div { background-origin: content-box; }
7. background-clip
تحدد امتداد الخلفية. القيم:
- border-box (افتراضي)
- padding-box
- content-box
- text مع -webkit-background-clip
div { background-clip: content-box; }
8. background-attachment
تحدد حركة الخلفية. القيم:
- scroll (افتراضي)
- fixed
- local
body { background-attachment: fixed; }
9. background shorthand
تجمع كل القيم السابقة في خاصية واحدة:
body {
background: lightblue url("bg.jpg") no-repeat center center / cover fixed;
}