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

مثال

كرر صورة الخلفية عموديًا فقط:

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

المزيد من الأمثلة "جربها بنفسك" أدناه.

التعريف والاستخدام

تحدد الخاصية ما background-repeatإذا / كيف سيتم تكرار صورة الخلفية.

بشكل افتراضي ، يتم تكرار صورة الخلفية عموديًا وأفقيًا.

نصيحة: يتم وضع صورة الخلفية وفقًا لخاصية وضع الخلفية . إذا لم يتم تحديد موضع الخلفية ، يتم وضع الصورة دائمًا في الزاوية اليسرى العلوية للعنصر.

القيمة الافتراضية:	كرر
وارث:	رقم
متحرك:	رقم. اقرأ عن animatable
الإصدار:	CSS1
بناء جملة JavaScript:	الكائن .style.backgroundRepeat = "تكرار- x"

دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

ملاحظة: IE8 والإصدارات الأقدم لا تدعم صور خلفية متعددة على عنصر واحد.

بنية CSS

قيم الملكية

Value	Description	Play it
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x	The background image is repeated only horizontally
repeat-y	The background image is repeated only vertically
no-repeat	The background-image is not repeated. The image will only be shown once
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round	The background-image is repeated and squished or stretched to fill the space (no gaps)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

مزيد من الأمثلة

مثال

كرر صورة الخلفية عموديًا وأفقيًا (هذا افتراضيًا):

body {
background-image: url("paper.gif");
background-repeat: repeat;
}

مثال

كرر صورة الخلفية أفقيًا فقط:

body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}

مثال

لا تكرر صورة الخلفية. سيتم عرض الصورة مرة واحدة فقط:

body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}

مثال

استخدام تكرار الخلفية: مساحة وخلفية تكرار: دائري:

#example2 {
border: 2px solid black;
padding: 25px;
  background: url("w3css.gif");
background-repeat: space;
}

#example3 {
  border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
  background-repeat: round;
}

مثال

استخدم خصائص خلفية مختلفة لإنشاء صورة "رئيسية":

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}