مولفه های پس زمینه ی سی اس اس عبارتند از:
background-color
background-image
background-repeat
background-attachment
background-position
این بلاک یک تصویر پس زمینه دارد.
تنظیم رنگ پس زمینه برای یک المان در CSS
مولفه background-color
رنگ پس زمینه را برای یک المان مشخص می کند.
رنگ پس زمینه برای یک صفحه به صورت زیر تنظیم می شود:
در سی اس اس مقدار یک رنگ اغلب به این صورت مشخص می شود:
- یک نام رنگ معتبر – مثل
red
- یک مقدار hex – مثل
#ff0000
- یک مقدار rgb – مثل
rgb(255,0,0)
برای توضیحات کامل راجع به رنگ ها به فصل هفتم آموزش HTML نتران مراجعه کنید.
در مثال زیر هر یک از المان های <h1>
، <p>
، <div>
رنگ های پس زمینه متفاوتی دارند:
تصویر پس زمینه برای یک المان
مولفه background-image
یک تصویر را برای استفاده شدن به عنوان پس زمینه یک المان مشخص می کند.
به صورت معمولی تصویر تا وقتی که کل پس زمینه المان را پوشش دهد، کاشی وار، تکرار می شود.
تصویر پس زمینه برای یک صفحه به این صورت تنظیم می شود:
نکته: در هنگام استفاده از تصویر پس زمینه از تصویری استفاده کنید که مزاحم متن نباشد.
تکرار تصویر در پس زمینه (background-repeat)
به صورت پیشفرض مولفه background-image
یک تصویر را هم به صورت افقی و هم عمودی تکرار می کند.
بعضی از تصویر ها باید فقط به یکی از روش های افقی یا عمودی تکرار شوند وگرنه بد نمایش داده می شوند.
اگر شما بخواهید یک تصویر فقط به صورت افقی تکرار شود، می توانید از background-repeat: repeat-x;
استفاده کنید.
همچنین برای تکرار تصویر به صورت عمودی background-repeat: repeat-y;
را می توانید استفاده کنید.
استفاده از no-repeat برای تکرار نکردن تصویر پس زمینه
برای نمایش دادن تنها یک بار و بدون تکرار یک تصویر پس زمینه، باید از مولفه background-repeat
با مقدار no-repeat
استفاده کرد:
تنظیم محل تصویر پس زمینه با background-position
در بسیاری از موارد شاید ما بخواهیم که محل تصویر را تغییر دهیم، طوری که زیاد مزاحم متن نباشد. محل تصویر پس زمینه به وسیله مولفه background-position
مشخص می شود:
مولفه background-attachment
برای مشخص کردن اینکه تصویر پس زمینه ثابت شده باشد و با حرکت صفحه، حرکت نکند از مولفه background-attachment
با مقدار fixed
باید استفاده کرد:
برای مشخص کردن اینکه تصویر زمینه نباید ثابت باشد و به همراه صفحه باید اسکرول شود، مقدار این مولفه را برابر scroll بگذارید:
نوشتن همه مولفه های پس زمینه در مولفه background
برای مختصر کردن کد میتوانید از روشی استفاده کنید که تمام مولفه های پس زمینه را در یک مولفه مشخص کنید. به این مولفه، مختصر نویسی می گویند.
مولفه مختصر نویسی برای پس زمینه، مولفه background
می باشد:
در هنگام استفاده از مولفه مختصر نویسی ترتیب مقدار های مولفه به این صورت است:
background-color
background-image
background-repeat
background-attachment
background-position
تا وقتی که این ترتیب رعایت شود مولفه پس زمینه به درستی پاسخ میدهد و مهم نیست اگر خواستید یکی از این مقدایر را وارد نکنید، فقط ترتیب مهم است.
تمامی مولفه های CSS ممکن برای ایجاد تغییرات پس زمینه برای یک المان، این موارد هستند:
background | تمامی مولفه های پس زمینه در یک مولفه |
background-attachment | این مولفه ثابت بودن یا اسکرول شدن تصویر را مشخص می کند. |
background-clip | این مولفه مشخص می کند که تصویر پس زمینه از کجا شروع شود. می توانید از مقادیر padding-box و content-box برای افزایش محدوده پس زمینه استفاده کنید. |
background-color | این مولفه رنگ پس زمینه المان را تعیین می کند. |
background-image | این مولفه تصویر پس زمینه المان را تعیین می کند. |
background-origin | مکان تصویر یا تصاویر پس زمینه را مشخص می کند. |
background-position | نقطه شروع تصویر پس زمینه را مشخص می کند. |
background-repeat | نحوه تکرار یک تصویر پس زمینه را مشخص می کند. |
background-size | اندازه تصویر یا تصاویر پس زمینه را مشخص می کند. |