CSS Background Image

CSS பின்னணி படம்

CSS background-image

background-image பண்புத்தொகுப்பு ஒரு உறுப்பின் பின்னணியாகப் பயன்படுத்த ஒரு படத்தைக் குறிக்கிறது.

இயல்பாக, படம் மீண்டும் மீண்டும் வரும், எனவே இது முழு உறுப்பையும் மூடுகிறது.

எடுத்துக்காட்டு

ஒரு பக்கத்திற்கான பின்னணி படத்தை அமைக்கவும்:

body {
  background-image: url("paper.gif");
}

இது ஒரு நல்ல பின்னணி பட எடுத்துக்காட்டு. உரை எளிதில் படிக்கக்கூடியது.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டு உரை மற்றும் பின்னணி படத்தின் மோசமான கலவையைக் காட்டுகிறது. உரை கிட்டத்தட்ட படிக்க முடியாதது:

body {
  background-image: url("bgdesert.jpg");
}

இது ஒரு மோசமான பின்னணி பட எடுத்துக்காட்டு. உரை படிக்க கடினமானது.

குறிப்பு:

பின்னணி படத்தைப் பயன்படுத்தும் போது, உரையைக் குழப்பாத ஒரு படத்தைப் பயன்படுத்தவும்.

பின்னணி படம்

பின்னணி படம் <p> உறுப்பு போன்ற குறிப்பிட்ட உறுப்புகளுக்கும் அமைக்கப்படலாம்:

எடுத்துக்காட்டு

p {
  background-image: url("paper.gif");
}

இந்த <p> உறுப்புக்கு பின்னணி படம் அமைக்கப்பட்டுள்ளது. இது காகிதப் பின்னணியைப் போல தோற்றமளிக்கிறது.

CSS பயிற்சிகள்

பயிற்சி:

பின்னணி படத்தை அமைக்க எந்த CSS பண்புத்தொகுப்பு பயன்படுத்தப்படுகிறது?

background-img
✗ தவறு! background-img என்பது செல்லுபடியாகாத CSS பண்புத்தொகுப்பு
background-image
✓ சரி! background-image என்பது பின்னணி படத்தை அமைக்கப் பயன்படும் சரியான CSS பண்புத்தொகுப்பு
background-url
✗ தவறு! background-url என்பது செல்லுபடியாகாத CSS பண்புத்தொகுப்பு
image-background
✗ தவறு! image-background என்பது செல்லுபடியாகாத CSS பண்புத்தொகுப்பு

CSS பின்னணி பட பண்புத்தொகுப்பு

பண்புத்தொகுப்பு விளக்கம்
background-image ஒரு உறுப்புக்கான பின்னணி படத்தை அமைக்கிறது