CSS

CSS Background Position
موقع صورة الخلفية في لغة CSS

ستتعلم في هذا الدرس التحكم في موقع صور الخلفيات علي المتصفح بإستخدام خاصية CSS Background Position وهي محاذاة الصور يسار الصفحة أو يمين صفحة الويب أو في المنتصف أو بالإعلي أو بأسفل الصفحة.

التاريخ

23 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2003

المواضيع

24
الشروحات chevron_left CSS Background Position chevron_left CSS
CSS Flex Box keyboard_arrow_down

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;
}
ملاحظة
يجب ضبط طول ثابت عن طريق خاصية height لأي عنصر له خلفية صورة حتي تعمل خاصية background-size بطريقة صحيحة بالنسب المئوية في لغة CSS.

</> 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;
}
مصطلحات الدرس
Position
Position

موقع / وضعية

Background
Background

خلفية

Property
Property

خاصية

Value
Value

قيمة

Top
Top

أعلي

Right
Right

يمين

Left
Left

يسار

Left
Left

أسفل

Percentage
Percentage

نسبة مئوية

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.