HTML Background Images

HTML பின்புல படங்கள்

HTML உறுப்பில் பின்புல படம்

ஒரு HTML உறுப்பில் பின்புல படத்தைச் சேர்க்க, HTML style பண்புக்கூறு மற்றும் CSS background-image பண்பைப் பயன்படுத்தவும்:

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

<p> உறுப்பில் பின்புல படத்தைச் சேர்க்கவும்:

<p style="background-image: url('img_girl.jpg');">

நீங்கள் <head> பகுதியில் உள்ள <style> உறுப்பிலும் பின்புல படத்தைக் குறிப்பிடலாம்:

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

<style>
p {
  background-image: url('img_girl.jpg');
}
</style>
Background Image Example

பக்கத்தில் பின்புல படம்

முழு பக்கத்திற்கும் பின்புல படம் வேண்டுமென்றால், <body> உறுப்பில் பின்புல படத்தைக் குறிப்பிட வேண்டும்:

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

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

பின்புல படம் மீண்டும் மீண்டும் வருதல்

பின்புல படம் உறுப்பை விட சிறியதாக இருந்தால், உறுப்பின் முடிவை அடையும் வரை படம் கிடைமட்டமாகவும் செங்குத்தாகவும் தானாகவே மீண்டும் மீண்டும் வரும்:

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

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

பின்புல படம் மீண்டும் மீண்டும் வராமல் இருக்க, background-repeat பண்பை no-repeat என அமைக்கவும்:

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

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
Background Repeat Example

பின்புல படம் முழுவதும் பரவுதல்

பின்புல படம் முழு உறுப்பையும் மூட வேண்டுமென்றால், background-size பண்பை cover என அமைக்கலாம்.

மேலும், முழு உறுப்பும் எப்போதும் மூடப்பட்டிருப்பதை உறுதி செய்ய, background-attachment பண்பை fixed என அமைக்கவும்:

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

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

பின்புல படம் நீட்டுதல்

பின்புல படம் முழு உறுப்புக்கும் பொருந்த நீட்சியடைய வேண்டுமென்றால், background-size பண்பை 100% 100% என அமைக்கலாம்:

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

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

பயிற்சி

❓ பின்புல படங்களை வரையறுப்பதற்கான சரியான CSS பண்பு எது?

bg பண்பு
✗ தவறு!
image பண்பு
✗ தவறு!
background-image பண்பு
✓ சரி!

மேலும் CSS கற்றுக்கொள்ளுங்கள்

மேலே உள்ள எடுத்துக்காட்டுகளில் இருந்து, CSS பின்புல பண்புகளைப் பயன்படுத்தி பின்புல படங்களை வடிவமைக்க முடியும் என்பதை நீங்கள் கற்றுக்கொண்டீர்கள்.

CSS பின்புல பண்புகளைப் பற்றி மேலும் அறிய, எங்கள் CSS பின்புல டுடோரியலைப் படிக்கவும்.