ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে কোড লেখার পদ্ধতি নিয়ে আলোচনা করেছিলাম। আজ তোমাদের ব্যাকগ্রাউন্ড নিয়ে আলোচনা করা হলো :
ব্যাকগ্রাউন্ড :
ওয়েবপেজের বিভিন্ন উপাদান যেমন Body, Pragaph, Table ইত্যাদির জন্য ব্যাগ্রাউন্ড একটি অপরিহার্য উপাদান।এ সকল উপাদান সমূহের ব্যাকগ্রাউন্ড হিসেবে কালার অথবা ইমেজ ব্যবহার করা্ যায়।
ব্যাকগ্রাউন্ড হিসেবে কালার ব্যবহার :
ব্যাকগ্রাউন্ড হিসেবে কালার ব্যবহারের জন্য Declaration হতে পারে background:#900; অথবা background-color:#900; । যেমন body{ background-color:#900; } ।
ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহার :
ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহারের জন্য Declaration হবে background: url(../images/4.png); ।
যেমন body{ background: url(../images/4.png); }
ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহারের ক্ষেত্রে আরো কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে
যেমন body{ background: url(../images/4.png); }
ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহারের ক্ষেত্রে আরো কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে
- ব্যাকগ্রাউন্ড রিপিটেশন (Background repeatation )
- ব্যাকগ্রাউন্ড পজিশন (Background position )
- ব্যাকগ্রাউন্ড এটাচমেন্ট (Background attachment )
ব্যাকগ্রাউন্ড রিপিটেশন :
ব্যাগ্রাউন্ড ইমেজটি কতবার ব্যবহৃত হবে তা নির্দেশ করার জন্য ব্যাকগ্রাউন্ড রিপিটেশন ব্যবহার করা হয়। যদি পুরো ব্যাকগ্রাউন্ড জুড়ে ইমেজটিকে বারবার রিপিট করতে হয় তাহলে Declaration হবে background-repeat:repeat; যদি ইমেজটিকে মাত্র একবার ব্যবহার করতে হয় তাহলে Declaration হবে background-repeat:no-repeat ; যদি ইমেজটিকে X-অক্ষ বরাবর বারবার রিপিট করতে হয় তাহলে Declaration হবে background-repeat:repeat-x ; ইমেজটিকে Y-অক্ষ বরাবর বারবার রিপিট করতে হয় তাহলে Declaration হবে background-repeat:repeat-y ; । যেমন body { background: url(images/4.png); background-repeat:repeat-x;} । যদি body { background: url(images/4.png); } এভাবে Declaration করা হয় তাহলে পুরো ব্যাকগ্রাউন্ড জুড়ে ইমেজটি বারবার রিপিট হবে।
ব্যাকগ্রাউন্ড পজিশন :
ব্যাকগ্রাউন্ড ইমেজটির অবস্থান কোথায় হবে তা নির্দেশ করার জন্য ব্যাকগ্রাউন্ড পজিশন ব্যবহার করা হয়। যদি ইমেজটিকে বামে রাখতে হয় তাহলে Declaration হবে background-position:left ; এখানে left এর স্থানে right, center, bottom, top ইত্যাদি হতে পারে। যদি ইমেজটিকে উপর দিক থেকে বামে রাখতে হয় তাহলে Declaration হবে background-position:top-left; ।
ব্যাকগ্রাউন্ড এটাচমেন্ট :
ব্যাকগ্রাউন্ড ইমেজ পেজের অন্যান্য উপাদানের সাথে সাথে স্ক্রলিং হবে কিনা তা প্রকাশ করার জন্য ব্যাকগ্রাউন্ড এটাচমেন্ট ব্যবহার করা হয়। ব্যাকগ্রাউন্ড ইমেজ পেজের অন্যান্য উপাদানের সাথে সাথে স্ক্রলিং করার জন্য Declaration হবে background-attachment:scroll ; । সাধারণত কিছু উল্লেখ না করলে ব্যাকগ্রাউন্ড ইমেজ পেজের অন্যান্য উপাদানের সাথে সাথে স্ক্রলিং হয়। ব্যাকগ্রাউন্ড ইমেজ পেজের অন্যান্য উপাদানের সাথে সাথে স্ক্রলিং না করার জন্য Declaration হবে background-attachment: fixed; ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Selectors</title>
<style>
body{ background: url(../images/bg.png); background-attachment:fixed;}
p{background: #C0C ; color: #fff; margin-left:50px;}
h1{ margin-top:50px; color:#C00}
</style>
</head>
<body >
<h1>www.webschoolbd.com</h1>
<p id="post1">
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
</p> </body>
</html>
<head>
<title> Selectors</title>
<style>
body{ background: url(../images/bg.png); background-attachment:fixed;}
p{background: #C0C ; color: #fff; margin-left:50px;}
h1{ margin-top:50px; color:#C00}
</style>
</head>
<body >
<h1>www.webschoolbd.com</h1>
<p id="post1">
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
</p> </body>
</html>
Tags
CSS