التعامل مع الخلفيات (Backgrounds) والحدود (Borders)

عند التعامل مع صور الخلفية (background images) في CSS، تتوفر لديك عدة خصائص للتحكم في كيفية عرض هذه الصور.

الخصائص الرئيسية التي سنركز عليها هي background-size و background-repeat و background-position و background-attachment.

لنلقِ نظرةً أولاً على الخاصية background-image :

<style>
 body {
  background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
 }
</style>
        

معاينة:

يُعيّن كود CSS المذكور أعلاه صورة قطة كخلفية (background image) لعنصر body.

إذا كنت ترغب في تحديد حجم صورة الخلفية (size for the background image)، يمكنك استخدام الخاصية background-size.

يمكنك استخدام الخيار contain لتكبير (scale) الصورة إلى أقصى حد ممكن دون قصها أو تمديدها.

إليك مثال باستخدام background-size: contain :

<style>
 body {
  background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
  background-size: contain ;
  min-height: 100px ;
 }
</style>
        

معاينة:

نحن نضبط الحد الأدنى للارتفاع min-height عند 100px لضمان ظهور صورة الخلفية (background image) وحفاظ التخطيط (layout) على حد أدنى للارتفاع، مما يضمن أن يبدو التصميم متوازناً وجذاباً بصرياً حتى في حال وجود محتوى قليل.

إذا قمنا بتغيير الخاصية background-size لـ استخدام القيمة cover، فسيتم تغيير حجم صورة الخلفية لتغطي عنصر body بالكامل مع الحفاظ على نسبة أبعادها.

<style>
 body {
  background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
  background-size: cover ;
  min-height: 100px ;
 }
</style>
        

معاينة:

في الأمثلة السابقة، ربما لاحظت أن صورة الخلفية (background image) تتكرر باستمرار (continuously repeat).

بشكل افتراضي، تتكرر (repeat) صور الخلفية (background images) أفقيًا وعموديًا لملء العنصر بالكامل؛ ومع ذلك، يمكنك التحكم في هذا السلوك.

يمكنك استخدام الخاصية background-repeat مع ضبط قيمتها على no-repeat.

<style>
 body {
  background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
  background-size: contain ;
  background-repeat: no-repeat ;
  min-height: 100px ;
 }
</style>
        

معاينة:

عند ضبط الخاصية background-size على القيمة contain والخاصية background-repeat على القيمة no-repeat، لن تتكرر الصورة على الشاشة.

إذا أردت تكرار صورة الخلفية أفقيًا (repeat the background image horizontally)، يمكنك استخدام القيمة repeat-x للخاصية background-repeat.

<style>
 body {
  background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
  background-size: contain ;
  background-repeat: repeat-x ;
  min-height: 100px ;
 }
</style>
        

معاينة:

إذا أردت تكرار صورة الخلفية عمودياً (repeat the background image vertically)، يمكنك استخدام القيمة repeat-y للخاصية background-repeat.

<style>
 body {
  background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
  background-size: contain ;
  background-repeat: repeat-y ;
  min-height: 100px ;
 }
</style>
        

معاينة:

لتحديد موضع (position) صورة الخلفية (background image) على الشاشة، يمكنك استخدام الخاصية background-position.

تتيح لك الخاصية background-position تحديد موضع ظهور صورة الخلفية داخل العنصر؛ إذ يمكنك استخدام كلمات مفتاحية مثل top و bottom و left و right و center ، أو استخدام قيم محددة بوحدة البكسل (pixel) أو النسبة المئوية (percentage values).

إليك مثال يستخدم القيمتين center و top للخاصية background-position :

<style>
 body {
  background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
  background-size: contain ;
  background-repeat: no-repeat ;
  background-position: center top ;
  min-height: 100px ;
 }
</style>
        

معاينة:

يُحدد كود CSS هذا موقع صورة الخلفية في منتصف العنصر أفقيًا وفي الجزء العلوي عموديًا.

وأخيراً، تحدد الخاصية background-attachment ما إذا كانت صورة الخلفية تتمرر (scrolls) مع المحتوى أم تظل ثابتة (fixed) عند تمرير الصفحة.

تتمثل القيم الرئيسية في scroll (وهي القيمة الافتراضية)، حيث تتحرك صورة الخلفية مع المحتوى، و fixed ، حيث تظل صورة الخلفية ثابتة في مكانها على الشاشة.

إليك مثال يستخدم القيمة الثابتة fixed للخاصية background-attachment :

<style>
 body {
  background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
  background-position: center top ;
  background-attachment: fixed ;
 }
</style>
        

معاينة:

يُحدد كود CSS هذا صورة الخلفية بحيث تظل ثابتة (fixed) في مكانها حتى عند تمرير (scroll) الصفحة.

إذا أردت دمج (combine) بعض الخصائص في سطر واحد، يمكنك القيام بذلك باستخدام الخاصية المختصرة background.

إليك مثال:

<style>
 body {
  background: center top fixed
   url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
 }
</style>
        

معاينة:

يجمع المثال أعلاه بين الخصائص background-image و background-position و background-attachment في سطر واحد.

من خلال إتقان هذه الخصائص، ستحظى بتحكم كبير في كيفية عرض صور الخلفية في تصميمات الويب الخاصة بك، مما يتيح لك إنشاء تخطيطات أكثر جاذبية من الناحية البصرية وفعالية من حيث الأداء الوظيفي.