Background គឺជា property មួយត្រូវប្រើប្រាស់សំរាប់រចនាផ្ទៃ element ទាំងមូលអោយមានពណ៌ឬរូបភាពទៅតាមអ្វីៗដែលយើងចង់បាន។ Background ត្រូវចែកចេញជា preperty ដោយឡែកផ្សេងៗគ្នាមួយចំនួនទៀត មានដូចជា background-color, background-image, background-repeat, background-attachment, background-position ជាដើម។

background-color ត្រូវប្រើប្រាស់សំរាប់រចនាពណ៌នៃផ្ទៃរបស់ element ទាំងមូល។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Background</title>
    <style>
      body {
  		background-color: lightblue;
	  }
    </style>
  </head>
  
  <body>
	Hello World!

	This page has a light blue background color!
  </body>
</html>

Hello World!

This page has a light blue background color!

background-image ត្រូវប្រើប្រាស់សំរាប់យករូបភាពផ្សេងៗមកបិទនៅលើផ្ទៃរបស់ element ។ ហើយបើរូបភាពដែលត្រូវយកមកបិទនោះ មានទំហំមិនពេញផ្ទៃរបស់ element ទេ រូបភាពនោះនឹងត្រូវចំលងចេញជាច្រើនរូបភាព ដើម្បីបិទនៅលើផ្ទៃ element អោយបានពេញទាំងអស់។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Background</title>
    <style>
      body {
  		background-image: url("wood.jpg");
	  }
    </style>
  </head>
  
  <body>
	Hello World!

	This page has a light blue background color!
  </body>
</html>

Hello World!

This page has an image as the background!

background-repeat ត្រូវយកទៅប្រើប្រាស់ជាមួយនឹង background-image ដើម្បីកំណត់ពីការចំលងរូបភាពដែលត្រូវចំលងយកទៅបិទនៅផ្ទៃ element ។ តំលៃសំរាប់ property នេះ អាចជា no-repeat, repeat-x, repeat-y ។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Background</title>
    <style>
      body {
  		background-image: url("wood.jpg");
        background-repeat: repeat-x;
	  }
    </style>
  </head>
  
  <body>
	Hello World!
	Here, a background image is repeated only horizontally!
  </body>
</html>

Hello World!

Here, a background image is repeated only horizontally!

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>CSS Background</title> <style> body { background-image: url("wood.jpg"); background-repeat: repeat-x; background-attachment: fixed; } </style> </head> <body>

The background-attachment Property

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).

Tip: If you do not see any scrollbars, try to resize the browser window.

The background-image is fixed. Try to scroll down the page.

</body> </html>

The background-attachment Property

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).

Tip: If you do not see any scrollbars, try to resize the browser window.

The background-image is fixed. Try to scroll down the page.

យ៉ាងណាម៉ិញ បណ្តា property ខាងលើនេះ អាចត្រូវបង្រួមមកអោយមកនៅត្រឹមតែ background តែមួយបាន ដោយធ្វើដូចខាងក្រោមនេះ៖

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>CSS Background</title> <style> body { background: lightblue url("wood.jpg") repeat-x fixed; } </style> </head> <body>

The background-attachment Property

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).

Tip: If you do not see any scrollbars, try to resize the browser window.

The background-image is fixed. Try to scroll down the page.

</body> </html>

The background-attachment Property

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).

Tip: If you do not see any scrollbars, try to resize the browser window.

The background-image is fixed. Try to scroll down the page.