خصوصیت background-position CSS
- صفحه قبل background-origin
- صفحه بعدی background-position-x
تعریف و استفاده
background-position ویژگی تعیین موقعیت شروع تصویر پس‌زمینه.
این ویژگی تصویر اصلی پس‌زمینه را (که background-image موقعیت) تعریف شده، اگر تصویر پس‌زمینه باید تکرار شود، از این نقطه شروع خواهد شد.
نکته:شما باید ویژگی background-attachment را به "fixed، تا اطمینان حاصل شود که این ویژگی در Firefox و آپرا به درستی کار می‌کند.
لطفاً به:
آموزش CSS:پس‌زمینه CSS
دستورالعمل CSS:ویژگی background-image
دستورالعمل HTML DOM:ویژگی backgroundPosition
مثال
چگونه تصویر پس‌زمینه را قرار دهیم:
body
{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
آموزش CSS
background-position: مقدار;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
|
اگر شما تنها یک کلمه کلیدی مشخص کنید، مقدار دیگر "center" خواهد بود. مقدار پیش‌فرض: 0% 0%. |
| x% y% |
مقدار اول، موقعیت افقی است و مقدار دوم، موقعیت عمودی است. گوشه بالا چپ 0% 0% است. گوشه پایین راست 100% 100% است. اگر شما تنها یک مقدار مشخص کنید، مقدار دیگر 50% خواهد بود. |
| xpos ypos |
مقدار اول، موقعیت افقی است و مقدار دوم، موقعیت عمودی است. گوشه بالا چپ 0 0 است. واحد‌ها پیکسل (0px 0px) یا هر واحد دیگر CSS هستند. اگر شما تنها یک مقدار مشخص کنید، مقدار دیگر 50% خواهد بود. شما می‌توانید از% و مقادیر position به صورت ترکیبی استفاده کنید. |
جزئیات فنی
| مقدار پیش‌فرض: | 0% 0% |
|---|---|
| ارث‌پذیری: | خیر |
| نسخه: | CSS1 |
| آموزش نحوی جاوااسکریپت: | آبجکت.style.backgroundPosition="center" |
مثال‌های بیشتر
- چگونه می‌توانید از% برای قرار دادن تصویر پس‌زمینه استفاده کنید
- این مثال نشان می‌دهد که چگونه می‌توانید از درصد برای قرار دادن تصویر پس‌زمینه در صفحه استفاده کنید.
- چگونه می‌توانید از پیکسل برای قرار دادن تصویر پس‌زمینه استفاده کنید
- این مثال نشان می‌دهد که چگونه می‌توانید از پیکسل برای قرار دادن تصویر پس‌زمینه در صفحه استفاده کنید.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.
| کروم | اسپیرت | افرکس | سفاری | آپرا |
|---|---|---|---|---|
| کروم | IE / اسپیرت | افرکس | سفاری | آپرا |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- صفحه قبل background-origin
- صفحه بعدی background-position-x
