شرح خاصية background-repeat للتحكم في تكرار وعدم تكرار صورة الخلفية

أهلا بكم في كود ويب
أهلا بكم في درس جديد من دروس css وفي هذا الدرس سوف نتعرف على خاصية جديدة من خواص css وهي خاصية background-repeate
وفي هذا الدرس سوف نتعلم كيفية التحكم في خلفية الصورة من حيث التكرار وعدم التكرار وتكرار الصورة بشكل أفقي فقط أو بشكل عمودي فقط

كيف تجعل صورة الخلفية متكررة أكثر من مرة
كيف تجعل صورة الخلفية لا تتكرر
كيف تجعل صورة الخلفية تتكرر بشكل أفقي فقط
كيف تجعل صورة الخلفية تتكرر بشكل عمودي فقط


وفي الدرس السابق تعلمنا خاصية background-image لإضافة الصورة كخلفية مراجعة الدرس من هنا
هذه الخاصية background-repeat والتى من خلالها يمكن التحكم في تكرار وعدم تكرار الصورة وهي تشمل عدة قيم
repeat تكرارالصورة
no-repeat عدم التكرار
repeat-x تكرار بشكل أفقي
repeat-y تكرار بشكل عمودي

خاصية background-repeat

نقوم أولا بكتابة هذه الخاصية background-repeat ثم استبدل رموز النجمة بالقيمة المناسبة ثم تضع علامة ;
background-repeat:***;

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

body{background-image:url(https://lh3.googleusercontent.com/-wz_uVYrh0YI/WLrXjKYRI_I/AAAAAAAAMaI/BmIXx4tzQEo78jgkPRXeRIDI3rB89So0wCLcB/h104/code_wap.png);
background-repeat:repeat;}
النتيجة مثال أخر

عدم تكرار صورة الخلفية

في حالة إذا كانت الصورة صغيرة سيتم تكرارها تلقائيا كما في المثال السابق ويمكننا التحكم في صورة الخلفية وجعلها لا تتكرر أي تكون صورة واحدة فقط حتى وإذا كانت صغيرة وذلك من خلال استخدام هذه الخاصية background-repeat:no-repeat
body{background-image:url(https://lh3.googleusercontent.com/-wz_uVYrh0YI/WLrXjKYRI_I/AAAAAAAAMaI/BmIXx4tzQEo78jgkPRXeRIDI3rB89So0wCLcB/h104/code_wap.png);
background-repeat:no-repeat}
النتيجة مثال أخر

تكرار صورة الخلفية بشكل أفقي فقط

من خلال هذه الخاصية background-repeat: repeat-x يمكننا جعل الخلفية تتكرر بشكل أفقي فقط
body{background-image:url(https://lh3.googleusercontent.com/-wz_uVYrh0YI/WLrXjKYRI_I/AAAAAAAAMaI/BmIXx4tzQEo78jgkPRXeRIDI3rB89So0wCLcB/h104/code_wap.png);
background-repeat: repeat-x;}
النتيجة مثال أخر

تكرار صورة الخلفية بشكل عمودي فقط

من خلال هذه الخاصية background-repeat: repeat-y يمكننا جعل الخلفية تتكرر بشكل عمودي فقط
body{background-image:url(https://lh3.googleusercontent.com/-wz_uVYrh0YI/WLrXjKYRI_I/AAAAAAAAMaI/BmIXx4tzQEo78jgkPRXeRIDI3rB89So0wCLcB/h104/code_wap.png);
background-repeat: repeat-y;}
النتيجة مثال أخر