របៀបកំណត់រូបភាព Background ជាមួយ CSS

នៅក្នុងវេបសាយមួយដើម្បីធ្វើអោយមានការទាក់ទាញ អ្នកបង្កើតគួរតែដាក់រូបភាពផ្ទៃខាងក្រោយ។ ប៉ុន្តែការដាក់ផ្ទៃខាងក្រោយនេះស្អាត ឬមិនស្អាតគឺអាស្រ័យទៅលើរូបភាពដែលយើងយកមកដាក់។ នៅក្នុងអត្ថបទនេះ Techfree នឹងលើកយកអំពី របៀបកំណត់រូបភាពផ្ទៃខាងក្រោយ (background-image) មកបង្ហាញជូនអ្នកទាំងអស់គ្នា។

លក្ខណៈសម្បត្តិ background-image នៅក្នុង CSS ត្រូវបានអនុវត្តជាមួយក្រាហ្វិក (ឧ. PNG, SVG, JPG, GIF, WEBP) ឬជម្រាលទៅលើផ្ទៃខាងក្រោយនៃធាតុមួយ។ តាមលំនាំដើម, រូបភាពត្រូវបានធ្វើម្តងទៀតដូច្នេះវាគ្របដណ្តប់ធាតុទាំងមូល។ រូបភាពផ្ទៃខាងក្រោយសម្រាប់ទំព័រមួយអាចត្រូវបានកំណត់ដូចខាងក្រោម៖

css-background

នៅបន្ទាត់ទី 7 background-image: url(“paper.gif”); គឺជាកន្លែងដែលយើងត្រូវដាក់រូបភាពផ្ទៃខាងក្រោយដែលយើងចង់ដាក់។

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-background1

រូបភាពផ្ទៃខាងក្រោយ (Background Image) – អាចធ្វើជាផ្តេក (Horizontally) ឬបញ្ឈរ (Vertically)

តាមលំនាំដើម លក្ខណៈសម្បត្តិ background-image ធ្វើឡើងវិញជារូបភាពទាំងផ្ដេកនិងបញ្ឈរ។ រូបភាពមួយចំនួនគួរតែត្រូវបានធ្វើឡើងវិញតែផ្ដេកឬបញ្ឈរប៉ុណ្ណោះ នោះពួកវានឹងមើលទៅចម្លែក ដូចឧទាហរណ៍នេះ៖

css-background2

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-background3

ប្រសិនបើរូបភាពខាងលើធ្វើម្តងទៀតតែផ្ដេកទេ យើងអាចប្រើធាតុ (background-repeat: repeat-x;) នេះ នោះផ្ទៃខាងក្រោយនឹងមើលទៅល្អប្រសើរជាងមុន៖

css-background4

ចំណាំ៖ ប្រសិនបើចង់អោយរូបភាពបញ្ឈរ យើងបន្ថែមធាតុ background-repeat: repeat-y;

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-background5

រូបភាពផ្ទៃខាងក្រោយ (Background Image) – កំណត់ទីតាំង ហើយមិនធ្វើម្តងទៀត (no-repeat)

ការបង្ហាញរូបភាពផ្ទៃខាងក្រោយ (background image) តែម្ដងត្រូវបានបញ្ជាក់ដោយលក្ខណៈសម្បត្តិ background-repeat

css-background6

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-background7

នៅក្នុងឧទាហរណ៍ខាងលើ, រូបភាពផ្ទៃខាងក្រោយត្រូវបានបង្ហាញនៅកន្លែងដដែលដូចអត្ថបទ។ យើងចង់ផ្លាស់ប្តូរទីតាំងនៃរូបភាពដូច្នេះវាមិនរំខានដល់អត្ថបទនេះទៀតទេ។ ទីតាំងនៃរូបភាពនេះត្រូវបានបញ្ជាក់ដោយលក្ខណៈសម្បត្តិ background-position៖

css-background8

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-background9

រូបភាពផ្ទៃខាងក្រោយ (Background Image) – ទីតាំងនៅថេរ

ដើម្បីបញ្ជាក់ថារូបភាពផ្ទៃខាងក្រោយគួរតែនៅទីតាំងថេរ (នឹងមិនត្រូវបានទាញចុះឡើងជាមួយនឹងផ្នែកនៅសល់នៃទំព័រ), ប្រើលក្ខណៈសម្បត្តិ background-attachment៖

css-background10

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-background11