នៅក្នុងវេបសាយមួយដើម្បីធ្វើអោយមានការទាក់ទាញ អ្នកបង្កើតគួរតែដាក់រូបភាពផ្ទៃខាងក្រោយ។ ប៉ុន្តែការដាក់ផ្ទៃខាងក្រោយនេះស្អាត ឬមិនស្អាតគឺអាស្រ័យទៅលើរូបភាពដែលយើងយកមកដាក់។ នៅក្នុងអត្ថបទនេះ Techfree នឹងលើកយកអំពី របៀបកំណត់រូបភាពផ្ទៃខាងក្រោយ (background-image) មកបង្ហាញជូនអ្នកទាំងអស់គ្នា។
លក្ខណៈសម្បត្តិ background-image នៅក្នុង CSS ត្រូវបានអនុវត្តជាមួយក្រាហ្វិក (ឧ. PNG, SVG, JPG, GIF, WEBP) ឬជម្រាលទៅលើផ្ទៃខាងក្រោយនៃធាតុមួយ។ តាមលំនាំដើម, រូបភាពត្រូវបានធ្វើម្តងទៀតដូច្នេះវាគ្របដណ្តប់ធាតុទាំងមូល។
នៅបន្ទាត់ទី 7 background-image: url(“paper.gif”); គឺជាកន្លែងដែលយើងត្រូវដាក់រូបភាពផ្ទៃខាងក្រោយដែលយើងចង់ដាក់។
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
រូបភាពផ្ទៃខាងក្រោយ (Background Image) – អាចធ្វើជាផ្តេក (Horizontally) ឬបញ្ឈរ (Vertically)
តាមលំនាំដើម លក្ខណៈសម្បត្តិ background-image ធ្វើឡើងវិញជារូបភាពទាំងផ្ដេកនិងបញ្ឈរ។ រូបភាពមួយចំនួនគួរតែត្រូវបានធ្វើឡើងវិញតែផ្ដេកឬបញ្ឈរប៉ុណ្ណោះ នោះពួកវានឹងមើលទៅចម្លែក ដូចឧទាហរណ៍នេះ៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
ប្រសិនបើរូបភាពខាងលើធ្វើម្តងទៀតតែផ្ដេកទេ យើងអាចប្រើធាតុ (background-repeat: repeat-x;) នេះ នោះផ្ទៃខាងក្រោយនឹងមើលទៅល្អប្រសើរជាងមុន៖
ចំណាំ៖ ប្រសិនបើចង់អោយរូបភាពបញ្ឈរ យើងបន្ថែមធាតុ background-repeat: repeat-y;
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
រូបភាពផ្ទៃខាងក្រោយ (Background Image) – កំណត់ទីតាំង ហើយមិនធ្វើម្តងទៀត (no-repeat)
ការបង្ហាញរូបភាពផ្ទៃខាងក្រោយ (background image) តែម្ដងត្រូវបានបញ្ជាក់ដោយលក្ខណៈសម្បត្តិ background-repeat ៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
នៅក្នុងឧទាហរណ៍ខាងលើ, រូបភាពផ្ទៃខាងក្រោយត្រូវបានបង្ហាញនៅកន្លែងដដែលដូចអត្ថបទ។ យើងចង់ផ្លាស់ប្តូរទីតាំងនៃរូបភាពដូច្នេះវាមិនរំខានដល់អត្ថបទនេះទៀតទេ។ ទីតាំងនៃរូបភាពនេះត្រូវបានបញ្ជាក់ដោយលក្ខណៈសម្បត្តិ background-position៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
រូបភាពផ្ទៃខាងក្រោយ (Background Image) – ទីតាំងនៅថេរ
ដើម្បីបញ្ជាក់ថារូបភាពផ្ទៃខាងក្រោយគួរតែនៅទីតាំងថេរ (នឹងមិនត្រូវបានទាញចុះឡើងជាមួយនឹងផ្នែកនៅសល់នៃទំព័រ), ប្រើលក្ខណៈសម្បត្តិ background-attachment៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
