சிந்தாநதி

இணையப்பக்கம் அல்லது வலைப்பதிவுக்கு பின்னணிப் படம் போடுவது எப்படி என்று பார்ப்போம்.

பிண்ணணிப் படங்களை பலவிதங்களில் இணைக்கலாம். சிறிய அளவிலான படங்கள் பக்கம் முழுவதும் டைல்களாக நிரம்பி உருவாகும் பின்னணி, நீளவாக்கில் உள்ள படங்களை இட்டு முழுப் பக்கத்துக்கும் நிரப்புவது போன்றவை பெரும்பாலும் பயன்படுத்தப் படுக்கின்றன. அது தவிர குறிப்பிட்ட படத்தை குறிப்பிட்ட இடத்தில் பொருத்தியும் பின்னணி உருவாக்கப் படுவதுண்டு.

இவற்றை எப்படி வலைப்பதிவுகளில் இணைப்பது?

பதிவின் டெம்பிளேட் எடிட் செய்யும் பகுதியில் கீழ்க்கண்ட நிரலில் ஒன்றை உங்கள் படம் இருக்கும் டைரக்டரியின் முகவரியுடன் இணைத்தால் வலைப்பதிவில் பின்னணிப் படம் இணைந்து விடும்.

உள்ளே நுழைவது முதல் அடைப்பலகை நிரல் பகுதியை அடைவது வரையிலான (html edit) விஷயங்கள் உங்களுக்கு தெரியும் தானே? இல்லாவிட்டாலும் புது புளக்கரில் தலைப்பில் படம் போடுவது எப்படி என்று பதிவர் சின்னக்குட்டி வீடியோ பதிவு போட்டு விளக்கியிருக்கிறார். அந்த வழிமுறைகளின் படி html edit பகுதியை அடைந்து அதில் நமக்கு வேண்டிய நிரலை வேண்டிய இடத்தில் இணைத்து விட வேண்டியதுதான். அவர் தலைப்பில் படம் போடுவது எப்படி என்று விளக்கியிருக்கிறார். அது ஏற்கனவே இருக்கும் தலைப்பை நீக்கி விட்டு படத்தலைப்பை இடுவதற்கான வழிமுறை. இங்கே கூறப் படும் வழிமுறைப்படி தலைப்பை நீக்காமலே தலைப்புக்கும் பின்னணிப் படம் கொடுக்கலாம்.

நிரலின் style பகுதியில் தான் நம்முடைய இந்த நிரல்களை இணைக்க வேண்டும்.

சிறிய அளவிலான படங்களை பின்னணியில் டைல் முறையில் நிரப்ப style -> body இப்படி அமைய வேண்டும்.

body{
background:url("http://www.~/~/sky.jpg") repeat-xy;
}

நீளவாட்டில் உள்ள படங்களை (உதா: 15px, 800px) பின்னணியாக்க

body {background:url("http://www.~/~/sky.jpg") repeat-x;}

உயரமாக உள்ள படங்களை (உதா: 800px, 20px) பின்னணியாக்க

body {background:url("http://www.~/~/sky.jpg") repeat-y;}

கோடிங்கை இப்படியும் எழுதலாம்

body {
background: white url("http://www.~/~/sky.jpg");
background-repeat: repeat-y;
background-position: center;
}

ஒரு படத்தை பின்னணியில் குறிப்பிட்ட இடத்தில் வைக்க

வலப்புற மேல் மூலை

body { background: url("http://www.~/~/sky.jpg") right top;}

அல்லது

body { background: url("http://www.~/~/sky.jpg") 100% 0%;}

இடப்புற மேல் மூலை

body { background: url("http://www.~/~/sky.jpg") left top;}

அல்லது

body { background: url("http://www.~/~/sky.jpg") 0% 0%;}

மேல்புற மையம்

body { background: url("http://www.~/~/sky.jpg") center top;}

அல்லது

body { background: url("http://www.~/~/sky.jpg") 50% 0%;}

மையம்

body { background: url("http://www.~/~/sky.jpg") center center;}

அல்லது

body { background: url("http://www.~/~/sky.jpg") 50% 50%;}

கீழ்ப்புற மையம்

body { background: url("http://www.~/~/sky.jpg") center bottom;}

அல்லது

body { background: url("http://www.~/~/sky.jpg") 50% 100%;}

கீழ் இடப்புற மூலை

body { background: url("http://www.~/~/sky.jpg") left bottom;}

அல்லது

body { background: url("http://www.~/~/sky.jpg") 0% 100%;}

கீழ் வலப்புற மூலை

body { background: url("http://www.~/~/sky.jpg") right bottom;}

அல்லது

body { background: url("http://www.~/~/sky.jpg") 100% 100%;}


இந்த நிரல்கள் body tag உடன் இணைக்கும் போது பின்னணிப் படமாக வருவது போலவே header image அல்லது banner image உடன் இணைத்து அந்தந்த இடத்தில் படத்தை இணைத்தால் தலைப்புக்கு பின்னணிப் படம் கொடுக்கலாம். p அல்லது div மற்றும் table டேகுடன் இணைத்துக் கூட குறிப்பிட்ட இடத்தில் படம் எப்படி வர வேண்டும் என்பதை தீர்மானிக்க முடியும். h1, h2 போன்றவற்றுக்கும் இம்முறையில் பின்னணிப் படம் இணைக்கலாம்.

body tag உடன் மட்டும் இன்னொரு சிறப்பு பின்னணி அமைப்பை உருவாக்க முடியும். இதில் திரையில் பின்னணிப் படம் நிலையாக இருக்க content ஐ மட்டும் scroll செய்து பார்க்க முடியும்.

body{ background: url("http://www.~/~/sky.jpg") gray 50% repeat fixed; }

இன்னொரு மாதிரி

body {
background: red url("http://www.~/~/sky.jpg");
background-repeat: repeat-y;
background-attachment: fixed;
}

இது மற்றொரு மாதிரி

body {
background-image: url("http://www.~/~/sky.jpg");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}

அழகான பின்னணிப் படம் போட ஆசைப்படுபவர்கள் போட்டு சோதித்துப் பாருங்கள். html edit செய்யும் போது முக்கியமாக கவனிக்க வேண்டியது முதலில் அந்த நிரலை சேமித்துக் கொள்ள வேண்டும். ஏதாவது தவறாக வந்தாலும் அதை மீண்டெடுக்க அது மிக அவசியம்.