ব্যাকগ্রাউন্ড (Background)|সি এস এস বাংলা টিউটোরিয়াল

ব্যাকগ্রাউন্ড (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>
<p id="post1">
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট © ২০১১-২০১২ সর্বস্বত্ত্ব সংরক্ষিত, টিউটরিয়ালবিডি, একটি টিউটো ওয়েবস প্রতিষ্ঠান.