این آموزش در تاریخ ۱۴۰۰/۱۰/۲۷ آپدیت شده است.
آموزش ویژگی background-position در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی background-position در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی background-position در CSS
با استفاده از ویژگی background-position در CSS میتوان موقعیت ( پوزیشین ) قرار گیری تصویر زمینه را مشخص کرد، مثلا میتونیم مشخص کنیم تصویر زمینه در وسط صفحه قرار بگیرد یا مثلا در گوشه پایین سمت راست و…
بصورت پیش فرض تصویر زمینه از بالا گوشه سمت چپ شروع و قرار میگیرد و همچنین بصورت افقی و عمودی تکرار می شود.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی background-position را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : قرار دادن تصویر در وسط صفحه ( بصورت افقی و عمودی ) ( چون از یک مقدار استفاده کردیم، دیگه خودش بصورت پیش فرض اون center رو هم بصورت افقی و هم بصورت عمودی مشخص میکنه )
|
1 2 3 |
body { background-position: center; } |
مثال شماره ۲ : قرار دادن تصویر در پایین گوشه سمت راست ( استفاده از ۲ مقدار، bottom یعنی سمت پایین و right یعنی راست )
|
1 2 3 |
body { background-position: bottom right; } |
مثال شماره ۳ : استفاده از واحد درصدی (%) ( قرار دادن تصویر در وسط صفحه )
|
1 2 3 |
body{ background-position: 50% 50%; } |
Free-Learn
جدول مشخصات ویژگی background-position در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۰% ۰% |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.backgroundPosition=”center”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی background-position در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| background-position | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
background-position: Value_Name|x% y%|X Y|initial|inherit |
Free-Learn
جدول مقادیر ویژگی background-position در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
مقدار اول بصورت افقی و مقدار دوم بصورت عمودی محاسبه میشه اگه فقط ۱مقدار مشخص شه مقدار دوم بصورت خودکار center تنظیم میشه |
| %x% y | مقدار اول بصورت افقی و مقدار دوم بصورت عمودی محاسبه میشه بصورت پیش فرض %۰ %۰ می باشد این یعنی تصویر در گوشه بالا سمت چپ قرار میگیرد مثلا %۵۰ %۵۰ میشه وسط صفحه |
| X Y | مقدار اول بصورت افقی و مقدار دوم بصورت عمودی محاسبه میشه میشه از واحدهای اندازه گیری در CSS استفاده کرد ( آموزش واحدهای اندازه گیری ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- مقدار اول موقعیت افقی و مقدار دوم موقعیت عمودی را مشخص میکند، حال اگه فقط موقعیت افقی را بنویسید، مرورگرها بصورت خودکار خودشون موقعیت عمودی را در مرکز محاسبه میکنند.
- با استفاده از ویژگی background-attachment میتوان مشخص کرد که تصویر زمینه ثابت باشد یا با اسکرول تصویر هم اسکرول شود، پیشنهاد میکنم حتما آموزش ویژگی جذاب background-attachment را مشاهده نمایید.
