ব্যাকগ্রাউন্ড (Background) : সি এস এস (পর্ব-৯)

ওয়েবপেজের বিভিন্ন উপাদান যেমন 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 এ উল্লেখ করতে হয়। এগুলো হচ্ছে

ব্যাকগ্রাউন্ড রিপিটেশন (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.tutohost.com</h1>

We are bangladeshi Hostgator hosting provider. <br />

</p>

</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।