CSS Background Image Repeat

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

CSS background-repeat

background-repeat பண்புத்தொகுப்பு ஒரு பின்னணி படம் எப்படி மீண்டும் மீண்டும் வரும் என்பதை அமைக்கிறது.

இயல்பாக, ஒரு background-image செங்குத்தாகவும் கிடைமட்டமாகவும் மீண்டும் மீண்டும் வரும்.

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

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

body {
  background-image: url("gradient_bg.png");
}

இயல்பான மீண்டும் மீண்டும் வருதல் - செங்குத்தாகவும் கிடைமட்டமாகவும்

CSS background-repeat கிடைமட்டமாக

மேலே உள்ள படம் கிடைமட்டமாக மட்டுமே மீண்டும் மீண்டும் வந்தால் (background-repeat: repeat-x;), பின்னணி சிறப்பாகத் தோன்றும்:

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

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

repeat-x - கிடைமட்டமாக மட்டுமே மீண்டும் மீண்டும் வருதல்

💡 உதவிக்குறிப்பு:

ஒரு படத்தை செங்குத்தாக மட்டுமே மீண்டும் மீண்டும் வர, background-repeat: repeat-y; பயன்படுத்தவும்

CSS background-repeat: no-repeat

பின்னணி படத்தை ஒருமுறை மட்டும் காட்டுவதும் background-repeat பண்புத்தொகுப்பால் குறிப்பிடப்படுகிறது:

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

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

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

no-repeat - படம் ஒருமுறை மட்டும் காட்டப்படுகிறது (மேல் இடது மூலையில்)

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

CSS background-position

background-position பண்புத்தொகுப்பு பின்னணி படத்தின் தொடக்க நிலையை அமைக்கப் பயன்படுகிறது.

இயல்பாக, ஒரு background-image ஒரு உறுப்பின் மேல்-இடது மூலையில் வைக்கப்படுகிறது.

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

பின்னணி படத்தை மேல்-வலது மூலையில் வைக்கவும்:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

background-position: right top - படம் மேல் வலது மூலையில் உள்ளது

இப்போது படம் உரையைக் குழப்பவில்லை.

CSS பயிற்சிகள்

❓ பயிற்சி:

பின்னணி படத்தை கிடைமட்டமாக மீண்டும் மீண்டும் வர சரியான பண்புத்தொகுப்பு மற்றும் மதிப்பை இழுத்து விடவும்.

body {
  background-image: url("gradient_bg.png");
  : ;
}
background-repeat: repeat-x;
✓ சரி! background-repeat: repeat-x; பின்னணி படத்தை கிடைமட்டமாக மட்டுமே மீண்டும் மீண்டும் வரச் செய்கிறது
background-repeat: repeat-y;
✗ தவறு! repeat-y செங்குத்தாக மட்டுமே மீண்டும் மீண்டும் வரச் செய்கிறது
background-repeat: no-repeat;
✗ தவறு! no-repeat படத்தை ஒருமுறை மட்டும் காட்டுகிறது
background-position: repeat-x;
✗ தவறு! background-position மீண்டும் மீண்டும் வருவதைக் கட்டுப்படுத்தாது

CSS பின்னணி மீண்டும் மீண்டும் வருதல் மற்றும் நிலை பண்புத்தொகுப்புகள்

பண்புத்தொகுப்பு விளக்கம்
background-position ஒரு பின்னணி படத்தின் தொடக்க நிலையை அமைக்கிறது
background-repeat ஒரு பின்னணி படம் எப்படி மீண்டும் மீண்டும் வரும் என்பதை அமைக்கிறது