இப்போதெல்லாம், பதிலளிக்கக்கூடிய பின்னணி படங்களைக் கொண்ட வலைத்தளங்கள் தேவைப்படுகின்றன. மொபைல்கள், டேப்லெட்டுகள் அல்லது டெஸ்க்டாப்கள் உட்பட கிட்டத்தட்ட எல்லா சாதனங்களிலும் பயனர்களுக்குப் பதிலளிக்கக்கூடிய இணையதளங்கள் சிறந்த பயனர் அனுபவத்தை வழங்குகின்றன. பதிலளிக்கக்கூடிய படங்கள் இணையதளத்தின் பின்னணி, திரை அளவு மற்றும் பரிமாணங்களை மாற்றியமைக்கலாம். பதிலளிக்கக்கூடிய படங்கள் தரம் மற்றும் விகிதாச்சாரத்தை பராமரிக்கின்றன என்பதை உறுதிப்படுத்துகின்றன. கூடுதலாக, பதிலளிக்கக்கூடிய பின்னணி படங்களைக் கொண்ட இணையதளம் விரைவாக ஏற்றப்படும்.
இந்த வழிகாட்டி பின்னணி படங்களை திரை பரிமாணங்களுக்கு மாற்றியமைப்பதற்கான வழிமுறைகளை வழங்கும்.
திரை பரிமாணங்களுக்கு பின்னணி படங்களை எவ்வாறு மாற்றியமைப்பது?
கீழே கொடுக்கப்பட்டுள்ள படிப்படியான வழிமுறைகளைப் பின்பற்றுவதன் மூலம் படத்தை திரையின் பரிமாணங்களுக்கு ஏற்ப மாற்றிக்கொள்ள முடியும்.
படி 1: ஒரு HTML கட்டமைப்பை உருவாக்கவும்
முதலில், ஒரு HTML கட்டமைப்பை உருவாக்கி, வெளிப்புற நடை தாளைப் பயன்படுத்தி சேர்க்கவும் <இணைப்பு> HTML இன் தலைப் பிரிவில் குறியிடவும். அந்த நோக்கத்திற்காக, வெறுமனே வைக்கவும் ' <இணைப்பு rel = 'ஸ்டைல்ஷீட்' href = 'style.css'> ” தலை குறிக்குள். ' rel ” குறிச்சொல் HTML ஆவணத்துடன் கோப்பின் தொடர்பைக் குறிப்பிடுகிறது. ' href ” குறிச்சொல் CSS கோப்பு முகவரியைக் குறிப்பிடுகிறது:
< html >
< தலை >
< இணைப்பு rel = 'ஸ்டைல்ஷீட்' href = 'style.css' >
< தலைப்பு > பதிலளிக்கக்கூடிய பின்னணி படம் தலைப்பு >
தலை >
< உடல் >
-- மற்ற உள்ளடக்கத்தைச் சேர்ப்பதற்கான பகுதி-- >
உடல் >
html >
படி 2: CSSஐப் பயன்படுத்தவும்
இப்போது, CSS ஐப் பயன்படுத்தவும் உடல் ”பிரிவு. முதலில், பின்னணி படத்தை குறிப்பிடவும். அந்த நோக்கத்திற்காக, பயன்படுத்தவும் ' பின்னணி படம் 'மற்றும்' குறிப்பிடவும் url() ” மதிப்பு படக் கோப்பு முகவரியைக் கொண்டுள்ளது.
அதன் பிறகு, பயன்படுத்தவும் ' பின்னணி படம் 'பட அளவைக் குறிப்பிட, ' பின்னணி-மீண்டும் 'படத்தின் மறுநிகழ்வை அமைப்பதற்கான சொத்து, மற்றும்' பின்னணி-இணைப்பு ” படத்தை மீதமுள்ள பக்கத்துடன் உருட்டுகிறதா இல்லையா என்பதை அமைக்கவும். இறுதியாக, அமைக்கவும் விளிம்பு 'மற்றும்' திணிப்பு ” முதல் ” 0 ”:
உடல் {பின்னணி படம்: url ( 'test-image.jpg' ) ;
பின்னணி அளவு: 100 % 100 % ;
/* படத்தை அளவிடவும் 100 % அகலம் மற்றும் 100 % உயரம் */
பின்னணி-மீண்டும்: இல்லை-மீண்டும்;
பின்னணி-இணைப்பு: நிலையானது;
விளிம்பு: 0 ;
திணிப்பு: 0 ;
/* விருப்பத்தேர்வு: நிலையான பின்னணி */
}
வெளியீடு
உலாவி சாளரத்தை ஒப்பந்தம் செய்வதற்கு முன் இது வெளியீடு:
உலாவியின் சுருக்கத்திற்குப் பிறகு:
மேலே உள்ள வெளியீடு, படம் திரை பரிமாணங்களுக்கு பின்னணியை மாற்றியமைத்ததை உறுதிப்படுத்துகிறது.
முடிவுரை
திரை பரிமாணங்களுக்கு பின்னணி படங்களை மாற்றியமைக்க, முதலில், ' வியூபோர்ட் பரிமாணங்கள் மற்றும் அளவிடுதல் ஆகியவற்றைக் கட்டுப்படுத்த தலைப் பிரிவில். பின்னர், ஒரு HTML கட்டமைப்பை உருவாக்கி, CSS ஐப் பயன்படுத்தவும். CSS இல், ' பின்னணி அளவு 'சொத்து மதிப்பு' கவர் ஒரு படத்தின் உயரம் மற்றும் அகலத்தை அளவிடுவதற்கான மதிப்பு. திரை பரிமாணங்களுக்கு பின்னணி படங்களை மாற்றியமைப்பதற்கான முழுமையான வழிகாட்டியை இந்தக் கட்டுரை வழங்கியுள்ளது.