Jassif Team Institution

The CSS background-size Property

background-size சொத்து பின்னணி படங்களின் அளவைக் குறிப்பிட உங்களை அனுமதிக்கிறது.

பின்னணி அளவு நீளம், சதவீதங்கள் அல்லது கீவேர்டுகளில் ஒன்றைப் பயன்படுத்தி குறிப்பிடப்படலாம்: auto, contain, அல்லது cover.

Background Size with Pixels

பின்வரும் எடுத்துக்காட்டு அசல் படத்தை விட மிகச் சிறியதாக ஒரு பின்னணி படத்தின் அளவை மாற்றுகிறது (பிக்சல்களைப் பயன்படுத்தி):

Example

பிக்சல்களுடன் பின்னணி அளவை அமைக்கவும்:

#div1 {
  background-image: url(img_flower.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 100px 80px;
}

background-size - auto, contain and cover

background-size க்கான கீவேர்ட் மதிப்புகள் auto, contain மற்றும் cover ஆகும்.

Example

contain, cover மற்றும் auto உடன் பின்னணி அளவை அமைக்கவும்:

#div1 {
  border: 1px solid black;
  background-image: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: contain;
}

#div2 {
  border: 1px solid black;
  background-image: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: cover;
}

#div3 {
  border: 1px solid black;
  background-image: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: auto;
}

Define Sizes of Multiple Background Images

background-size சொத்து பல பின்னணிகளுடன் பணிபுரியும் போது பல மதிப்புகளையும் (காற்புள்ளி பிரிக்கப்பட்ட பட்டியலைப் பயன்படுத்தி) ஏற்கிறது.

Example

#div1 {
  background-image: url(img_tree.gif), url(img_flwr.gif), url(paper.gif);
  background-position: left top, right bottom, left top;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: contain, 150px, auto;
}

CSS Full Size Background Image

இப்போது எப்போதும் முழு உலாவி சாளரத்தையும் மூடக்கூடிய ஒரு பின்னணி படத்தை வைத்திருக்க விரும்புகிறோம்.

தேவைகள் பின்வருமாறு:

• முழு பக்கத்தையும் படத்தால் நிரப்பவும் (வெள்ளை இடைவெளி இல்லை)
• தேவைக்கேற்ப படத்தை அளவிடவும்
• பக்கத்தில் படத்தை மையமாக்கவும்
• உருளல் பட்டைகளை ஏற்படுத்தாதீர்கள்

Example

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

CSS Hero Image

ஹீரோ படத்தை உருவாக்க (உரையுடன் கூடிய பெரிய படம்) ஒரு <div> இல் வெவ்வேறு பின்னணி பண்புகளைப் பயன்படுத்தலாம், மேலும் அதை நீங்கள் விரும்பும் இடத்தில் வைக்கலாம்.

Example

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}

Exercise

பின்வரும் CSS கீவேர்ட் மதிப்புகளில் எது உள்ளடக்க பகுதி முழுவதும் பின்னணி படத்தை நிரப்புகிறது, அதே நேரத்தில் படத்தின் விகிதத்தை பராமரிக்கிறது?

CSS Advanced Background Properties

பின்வரும் அட்டவணை CSS மேம்பட்ட பின்னணி சொத்துக்களை பட்டியலிடுகிறது: