CSS Backgrounds

CSS background properties என்பது ஒரு html element-க்கு background effects-ஐ உருவாக்குவதற்காக பயன்படுத்தபடுகிறது.

Type of CSS background properties:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Background Color

ஒரு html element-க்கு background color-ஐ உருவாக்க background-color property பயன்படுத்தபடுகிறது.

Example

.bcolor {
    background-color: #ff0000;
}

Output:

Background Image

ஒரு html element-க்கு background-image அமைப்பதற்காக background-image property பயன்படுத்தபடுகிறது.

By default, the image is repeated so it covers the entire element.

அதாவது html element-ன் width அதிகமாக இருந்து image-ன் width குறைவாக இருந்தால். இந்த image-ஐ background-image-ஆக set செயும்போது background முழுவதும் ஒரே image வராமல் image repeat ஆகும்.

Example

.bimage {
    background-image: url("your-image-path.png");            
}

Below is an example of a bad combination of text. The text is hardly readable:

Example

Try this code 
.bimage {
    background-image: url("beautifulnaturalsunsetimage.png");
    /* bad file name */
}

Example

Try this code 
.bimage {
    background-image: url("beautiful-natural-sunset-image.png");
    /* good readable file name */
}
Note :image file name readable-ஆக இருக்க வேண்டும், file name-ல் space-க்கு பதிலாக '-' அல்லது '_' ஐ பயன்படுத்தலாம்.

Background Image - Repeat Horizontally or Vertically

By default-ஆக, background-image property-ஆனது horizontal மற்றும் vertical-ஆக repeat செய்யும் .

image horizontal-ஆகா மட்டும் repeat செய்ய வேண்டுமெனில் (background-repeat: repeat-x;)பயன்படுத்த வேண்டும். vertical-ஆகா மட்டும் repeat செய்ய வேண்டுமெனில் (background-repeat: repeat-y;)-ஐ பயன்படுத்த வேண்டும்.

Example

Try this code 
body {
    background-image: url("beautiful-natural-sunset-image.png");
    background-repeat: repeat-x;
}

Background Image - Set position and no-repeat

background image ஒரே ஒரு முறை மட்டும் display செய்ய வேண்டுமெனில் background-repeat:no-repeat; பயன்படுத்த வேண்டும்.

Example

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

Background image எங்கு diplay ஆகவேண்டும் என்பதை background-position-ன் மூலம் சொல்லவேண்டும்.

Example

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

Background Image - Fixed position

Background image fixed-ஆக இருந்தால் page-ஐ scroll செய்ய முடியாது, அதற்க்கு பதில் background-attachment property பயன்படுத்திகொள்ளலாம்.

Example

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

Background - Shorthand property

இதில் background-ன் அனைத்து property-களையும் ஒரே இடத்தில் set செய்துகொள்ள பயன்படுத்தபடுகிறது.

The shorthand property for background is background:

Example

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

Comments