CSS Background Position
موقع صورة الخلفية في لغة CSS
ستتعلم في هذا الدرس التحكم في موقع صور الخلفيات علي المتصفح بإستخدام خاصية CSS Background Position وهي محاذاة الصور يسار الصفحة أو يمين صفحة الويب أو في المنتصف أو بالإعلي أو بأسفل الصفحة.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Background Position
موقع صورة الخلفية في لغة CSS
</>
CSS Background Position
موقع صورة الخلفية في لغة CSS
عن طريق خاصية background-position يتم التحكم في موقع صوره الخلفية على المتصفح سواء يساراُ أو يميناُ أو أوسط الصفحة أو أعلاها أو أسفل الصفحة.
قيم خاصية background-position:
- keywords وهي عبارة عن موقع صورة الخلفية علي المتصفح يمكن إستخدام القيم التالية:
[left top,left center,left bottom,right top,right center,right bottom,center top,center center,center bottom,left,center,right,top,bottom].
- percentage وهي إستخدام قيميتين 50% 100% محور X ومحور Y موقع الصورة عمودي ورأسي بالنسبة المئوية.
- length وهي إستخدام قيميتين 100px 200px محور X ومحور Y موقع الصورة عمودي ورأسي بوحدة بكسل pxiel.
background position syntax
طريقة كتابة خاصية background position.
background-position: value;
</>
CSS Background Position Percentage
النسب المئوية مع خاصية Background Position في لغة CSS
تحريك صورة الخلفية بالنسب المئوية مع محور X ومحور Y أفقياً ورأسياً تكون القيم من اليسار إلي اليمين:
- X القيمة الأولي موقع الصورة يميناً ويساراً.
- Y القيمة الثانية موقع الصورة لأعلي ولأسفل.
CSS Background Position Percentage
موقع الصورة يمين ويسار بالنسبة المئوية.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: 25% 40%;
height:1000px;
}
ملاحظة
</>
CSS Background Position length
وحدة pixel مع خاصية Background Position في لغة CSS
تحريك صورة الخلفية بوحدة pixel بكسيل مع محور X ومحور Y أفقياً ورأسياً تكون القيم من اليسار إلي اليمين:
- X القيمة الأولي موقع الصورة يميناً ويساراً.
- Y القيمة الثانية موقع الصورة لأعلي ولأسفل.
CSS Background Position length
موقع الصورة يمين ويسار بوحدة بيكسيل.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: 200px 300px;
height:1000px;
}
</>
CSS Background Position keywords
كلمات مفتاحية مع خاصية Background Position في لغة CSS
تحريك صورة الخلفية عن طريق إستخدام كلمات مفتاحية أفقياً ورأسياً تكون القيم من اليسار إلي اليمين:
- X القيمة الأولي موقع الصورة يميناً ويساراً.
- Y القيمة الثانية موقع الصورة لأعلي ولأسفل.
background-postion keywords:
[left top,left center,left bottom,right top,right center,right bottom,center top,center center,center bottom,left,center,right,top,bottom].
CSS Background Position right
موقع الصورة يمين عن طريق right keyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: right;
}
CSS Background Position center
موقع الصورة في المنتصف عن طريق centerkeyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: center;
}
CSS Background Position left
موقع الصورة في اليسار عن طريق left keyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: left;
}
CSS Background Position right bottom
موقع الصورة في يميناً مع موقع الصورة في الأسفل عن طريق right bottom keyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: right bottom;
height:800px;
}
CSS Background Position center bottom
موقع الصورة في بالأسفل مع موقع الصورة في المنتصف عن طريق center bottom keyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: center bottom;
height:800px;
}
موقع / وضعية
خلفية
خاصية
قيمة
أعلي
يمين
يسار
أسفل
نسبة مئوية
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
