انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 30
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
8
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,114
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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.

HTML 
background-position: value;

CSS Background Position Percentage النسب المئوية مع خاصية Background Position في لغة CSS

تحريك صورة الخلفية بالنسب المئوية مع محور X ومحور Y أفقياً ورأسياً تكون القيم من اليسار إلي اليمين:

  • X القيمة الأولي موقع الصورة يميناً ويساراً.
  • Y القيمة الثانية موقع الصورة لأعلي ولأسفل.

CSS Background Position Percentage

موقع الصورة يمين ويسار بالنسبة المئوية.

HTML 
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

موقع الصورة يمين ويسار بوحدة بيكسيل.

HTML 
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.

HTML 
body
{
  background-image:url('https://www.closetag.com/images/background.jpg');
  background-repeat: no-repeat;
  background-position: right;
}
جرّب بنفسك

CSS Background Position center

موقع الصورة في المنتصف عن طريق centerkeyword.

HTML 
body
{
  background-image:url('https://www.closetag.com/images/background.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
جرّب بنفسك

CSS Background Position left

موقع الصورة في اليسار عن طريق left keyword.

HTML 
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.

HTML 
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.

HTML 
body
{
  background-image:url('https://www.closetag.com/images/background.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  height:800px;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات8

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 8 مفهومةأول بطاقة، أول خطوة
01 Position موقع / وضعية
للمراجعة
02 Background خلفية
للمراجعة
03 Property خاصية
للمراجعة
04 Value قيمة
للمراجعة
05 Top أعلي
للمراجعة
06 Right يمين
للمراجعة
07 Left يسار
للمراجعة
08 Percentage نسبة مئوية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات2

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 2 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

لماذا تستخدم الخاصية background-position ؟

02

هل يمكننا استخدام النسبة المئوية في تحديد مكان الصورة في الخلفية