20. التحكم في حجم الخلفية وارتباطها

عند استخدام صور خلفية كبيرة، تحتاج إلى تحكم دقيق في كيفية توسعها وسلوكها عند تمرير المستخدم للصفحة.

حجم الخلفية (background-size)

تحدد هذه الخاصية كيفية تغيير حجم صورة الخلفية بالنسبة للحاوية.

css .full-screen-bg { background-image: url('image.jpg'); background-size: cover; /* يضمن ملء العنصر دائماً */ background-position: center; }

ارتباط الخلفية (background-attachment)

تحدد هذه الخاصية ما إذا كانت صورة الخلفية تتحرك مع المحتوى أو تظل ثابتة في مكانها.

css body { background-image: url('stars.jpg'); background-attachment: fixed; /* يخلق خلفية ثابتة لا تتحرك */ background-size: cover; }