تكرار الخلفية CSS

CSS background-repeat

بالتشابة،background-image يكرر الصورة في الاتجاه الأفقي والعمودي كلاهما.

بعض الصور يجب أن تكون مناسبة فقط لتكرار أفقي أو عمودي، وإلا سيبدو ذلك غريبًا، مثلما هو موضح أدناه:

مثال

body {
  background-image: url("gradient_bg.png");
}

جرب بنفسك

إذا كانت الصورة أعلاه تتكرر فقط في الاتجاه الأفقي (background-repeat: repeat-x;)، سيبدو الخلفية أفضل:

مثال

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

جرب بنفسك

إشارة إلىإذا كنت ترغب في تكرار الصورة عموديًا، يرجى تعيين background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat يمكن للخصائص أيضًا تحديد عرض الصورة مرة واحدة فقط:

مثال

عرض الصورة مرة واحدة فقط:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

جرب بنفسك

في المثال السابق، يتم وضع صورة الخلفية في نفس الموقع كنص. نريد تغيير موقع الصورة لتجنب التداخل الزائد بين الصورة والنص.

background-position CSS

background-position يستخدم هذا الخصائص لتحديد موقع صورة الخلفية.

مثال

ضع صورة الخلفية في الزاوية اليمنى العليا:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

جرب بنفسك