تكرار صورة الخلفية في CSS
تكرار خلفية CSS
بشكل افتراضي ، 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
الخاصية:
مثال
أظهر صورة الخلفية مرة واحدة فقط:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
في المثال أعلاه ، يتم وضع صورة الخلفية في نفس مكان النص. نريد تغيير موضع الصورة ، بحيث لا تزعج النص كثيرًا.
موقف الخلفية CSS
تُستخدم background-position
الخاصية لتحديد موضع صورة الخلفية.
مثال
ضع صورة الخلفية في الزاوية العلوية اليمنى:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}