সিএসএস৩ ব্যাকগ্রাউন্ড - Css3 Backgroud

ওয়েব পেজ তথা ওয়েব সাইট এর পৃষ্ঠদেশ বা background কে ছবি ব্যবহার করে আরও আকর্ষণীয় করার জন্য সিএসএস 3.0 তে নতুন কিছু background প্রোপার্টি যোগ করা হয়েছে।

সিএসএস 3.0 এর নতুন background প্রোপার্টি গুলো ব্যবহার করে নিচে একটি উদাহরন দেখুন।

নতুন প্রোপার্টি

পৃষ্ঠদেশ বা background এ ছবি নির্ধারণ করার জন্য সিএসএস 3.0 এ কিছু নতুন প্রোপার্টি যোগ করা হয়েছে। এই নতুন প্রোপার্টি গুলো ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশ বা background কে আরও আকর্ষণীয় করে তোলা যায়।

সিএসএস 3.0 তে সংযোজিত background প্রোপার্টি গুলো হল নিম্নরূপ।

• background-clip,
• background-origin ও
• background-size

সিএসএস 2.0 এর background প্রোপার্টি গুলো সম্পর্কে জানতে আমাদের সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

background-clip প্রোপার্টি

পৃষ্ঠদেশ বা background এ ছবিটি কতটুকু জায়গা জুড়ে অবস্থান করবে তা সিএসএস 3.0 এর background-clip প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।

এই প্রোপার্টির 3 টি মান বা value রয়েছে। এগুলো হল নিম্নরূপ।

• border-box - এই মান ব্যবহার করার ফলে বর্ডারসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড থাকবে। এটিই ডিফল্ট রুপে থাকে,
• padding-box - এই মান ব্যবহার করার ফলে প্যাডিংসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড থাকবে। এক্ষেত্রে বর্ডার অংশে কোনো ব্যাকগ্রাউন্ড থাকবে না এবং
• content-box - এই মান ব্যবহার করার ফলে শুধুমাত্র কন্টেন্ট বক্সে ব্যাকগ্রাউন্ড থাকবে। এক্ষেত্রে বর্ডার এবং প্যাডিং অংশে কোনো ব্যাকগ্রাউন্ড থাকবে না।

সব গুলো মান ব্যবহার করে, নিচে background-clip প্রোপার্টির একটি উদাহরণ দেখুন।

#border-box {
   border: 10px dotted red;
   padding:20px;
   background: yellow;
   }
   
#padding-box {
   border: 10px dotted red;
   padding:20px;
   background:yellow;
   background-clip: padding-box;
   }
   
#content-box {
   border: 10px dotted red;
   padding:20px;
   background:yellow;
   background-clip: content-box;
   }

কোড এডিটর

background-origin প্রোপার্টি

ছবিটি পৃষ্ঠদেশ বা background এর কোথায় অবস্থান করবে তা সিএসএস 3.0 এর background-origin প্রোপার্টি ব্যবহার করে নির্ধারণ করা হয়।

সিএসএস 3.0 সংস্করণে সংযুক্ত এই background-originপ্রোপার্টিতে 3টি মান বা value ব্যবহার করা যায়। নিচে এগুলো সম্পর্কে দেখুন।

• border-box - এই মানের ফলে ছবিটি বর্ডারের উপরের বাম কোন বা corner থেকে শুরু হয়,
• padding-box - এই মানের ফলেছবিটি প্যাডিং এর উপরের বাম কোন বা corner থেকে শুরু হয় এবং এটিই পূর্ব-নির্ধারিত বা default রুপে থাকে এবং
• content-box - এই মানের ফলে ছবিটি কন্টেন্টের উপরের বাম কোন বা corner থেকে শুরু হয়।

নিচের একটি উদাহরণ দেখুন, যেখানে background-origin প্রোপার্টির ব্যবহার করা হয়েছে।

#border-box {
   border: 5px solid teal;
   padding: 15px;
   background: url(../img/example.png);
   background-repeat: no-repeat;
   background-origin: border-box;
   }
   
#padding-box {
   border: 5px solid teal;
   padding: 15px;
   background: url(../img/example.png);
   background-repeat: no-repeat;
   }
   
#content-box {
   border: 5px solid teal;
   padding: 15px;
   background: url(../img/example.png);
   background-repeat: no-repeat;
   background-origin: content-box;
   }

কোড এডিটর

background-size প্রোপার্টি

সিএসএস 3.0 এর background-size প্রোপার্টি ব্যবহার করে পৃষ্ঠদেশ বা background এর ছবিটির আকার বা size নিয়ন্ত্রন করা যায়। সিএসএস 3.0 এর আগে পৃষ্ঠদেশ বা background এ ব্যাবহৃত ছবির আকার নিয়ন্ত্রন করা যেত না, মূল ছবির আকারই হতো পৃষ্ঠদেশ বা background এর ছবির আকার। কিন্তু সিএসএস 3.0 তে একটি ছবিকে পুনঃব্যবহার করে এর দৈর্ঘ্য বা size শতকরায় নির্ধারণ করা যায়। এছাড়া contain অথবা cover এই দুইটি কি-ওয়ার্ড ব্যবহার করেও পৃষ্ঠদেশ বা background ছবির আকার পরিবর্তন করা যায়।

নিচের উদাহরণে background-size প্রোপার্টি ব্যবহার করে পৃষ্ঠদেশ বা background এ ব্যাবহৃত ছবির আকার বা size পরিবর্তন করে দেখানো হলো।

#example {
   background: url(example.png);
   background-size: 300px 200px;
   background-repeat: no-repeat;
   }

কোড এডিটর

background-size প্রোপার্টির আরো দুইটি মান বা value হল contain এবং cover. contain কীওয়ার্ড পৃষ্ঠদেশ বা background এ ব্যাবহৃত ছবিকে যতদুর সম্ভব বৃদ্ধি করে। তবে এই ছবির প্রস্থ বা width এবং উচ্চতা বা height অবশ্যই কন্টেন্ট এরিয়ার সাথে খাপ খেতে হবে। cover কীওয়ার্ড ছবিটিকে উভয় দিকে বৃদ্ধি করে যাতে সম্পূর্ণ কন্টেন্ট এরিয়া ব্যাবহৃত ছবিটি দ্বারা আচ্ছাদিত হয়।

background প্রপার্টি

সিএসএস এর background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip এবং background-attachment প্রোপার্টি গুলোর শর্টহ্যান্ড প্রোপার্টি হল background প্রোপার্টি।

নিচে background শর্টহ্যান্ড প্রোপার্টির সিনট্যাক্স দেখুন।

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial/inherit;

সিএসএস এর background প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

body {
   background: gray url("example.jpg") no-repeat fixed center;
   }

কোড এডিটর

নোট - উপরের কোন একটি মান বা value বাদ দেওয়া হলেও এটি কোন প্রভাব ফেলবে না। যদি অনেক গুলো ছবি ব্যবহার করতে হয় কিন্তু পৃষ্ঠদেশ বা background এ একটি রঙ রাখতে হয় তাহলে background-color প্যারামিটারটি সবার শেষে লিখতে হবে।

একাধিক ছবি ব্যাবহার

সিএসএস 3.0 এর background প্রোপার্টির মাধ্যমে একাধিক ছবি ব্যবহার করা যায়। background-size প্রোপার্টিতে একাধিক মান বা value ব্যবহার করে এই একাধিক ছবি গুলোর আকার বা size ও নিয়ন্ত্রন করা যায়। এক্ষেত্রে কমা চিহ্ন দ্বারা মান গুলোকে পৃথক করতে হয়।

নিচে একটি উদাহরণ দেখুন, যেখানে পৃষ্ঠদেশ বা background এ ৩টি ছবি ব্যবহার করা হয়েছে এবং প্রত্যেকটি ছবির জন্য background প্রোপার্টির পৃথক পৃথক মান দেয়া হয়েছে।

#example {
   background: url(exampleOne.png) left top no-repeat,
   url(exampleTwo.png) right bottom no-repeat,
   url(exampleThree.png) left top repeat;
   background-size: 60px, 150px, auto;
   }

কোড এডিটর

সম্পূর্ণ আকারের background

যদি ওয়েব পেজে এমন একটি ছবি ব্যবহার করতে হয় যা ব্রাউজারের সম্পূর্ণ উইন্ডোকে সর্বদাই আচ্ছাদিত করে রাখবে তবে নিচের শর্ত গুলো পুরন করতে হবে।

• সঠিক আকার বা size এর ছবি ব্যাবহার করতে হবে,
• ছবিটি দিয়ে পুরো ওয়েব পেজকে পূর্ণ করতে হবে,
• ছবিটি পেজের মাঝখানে রাখতে হবে এবং
• কোনো স্ক্রলবার তৈরি করা যাবে না।

নিচে একটি উদাহরণ দেখুন, যেখানে background ও background-size প্রোপার্টি ব্যাবহার করা হয়েছে।

body {
   background: url(example.png) no-repeat center fixed;
   background-size: cover;
   }

কোড এডিটর

নোট - কোন ওয়েব পেজের পৃষ্ঠদেশে সম্পূর্ন ছবি দেওয়ার জন্য যেকাজ গুলো করতে হবে তা হল - html ট্যাগে ছবি নির্দেশ করতে হবে, ছবিটির অবস্থান অর্থাৎ background-position প্রোপার্টির মান center এবং background-attachment প্রোপার্টির মান fixed নির্ধারণ করতে হবে। background-size প্রোপার্টি ব্যাবহার করে ছবির আকার বা size সমন্বয় করতে হবে।

ব্রাউজার সমর্থন

নিচের টেবিলে দেয়া রো গুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন করে। এছাড়াও এর পরের লাইন -webkit- বা -moz- যুক্ত সংস্করণ গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম সংস্করণ যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

সিএসএস 3.0 background প্রোপার্টি