ব্যাকগ্রাউন্ড (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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।


সি এস এস এর সকল বাংলা টিউটোরিয়াল

আরো পড়ুনঃ

অসীম কুমার

লেখক ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়(DUET)এ EEE তে লেখাপড়া করেন। তিনি টিউটোরিয়ালবিডি এবং টিউটোহোস্টের জন্য ইলেক্ট্রনিক্স, ওয়েব ডিজাইন ও ডেভলপমেন্ট এবং মাইক্রোকন্ট্রোলারের উপর টিউটরিয়াল এবং ই-বুক লিখেছেন।এছাড়া তিনি বিজ্ঞান প্রযুক্তি ডট কমে নিয়মিত লিখে থাকেন। তিনি তার প্রতিটা টিউটোরিয়াল এবং ব্লগে সৃজনশীলতাকে গুরুত্ব দিয়ে থাকেন।তার ভাষায় "আসুন আমরা আমাদের দেশীয় প্রযুক্তিকে সমৃদ্ধ করার চেষ্টা করি, উৎসাহিত করি সকল ভাল পদক্ষেপ এবং প্রচেষ্টাকে।উজ্জ্বল আগামি আমাদেরকে হাতছানি দিচ্ছে"।তাকে ফেসবুকে বন্ধু হিসেবে যোগ করতে পারেন। 

Tags:

" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true">

ফেসবুকের মাধ্যমে মন্তব্য লিখুন

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

  1. December 21, 2012 at 4:45 pm

    I want css Varsion in Pdf . It is my best.

Leave a Reply