CSS বহুবক্তক ব্যাকগ্রাউন্ড

এই চাপে, আপনি একটি উপাদানে বহুবক্তক ব্যাকগ্রাউন্ড ছবি যোগ করার কিভাবন শিখবেন。

আপনি এছাড়াও নিম্নলিখিত বৈশিষ্ট্যগুলি শিখবেন:

  • background-size
  • background-origin
  • background-clip

CSS বহুবক্তক ব্যাকগ্রাউন্ড

CSS দ্বারা background-image একটি উপাদানে বহুবক্তক ব্যাকগ্রাউন্ড ছবি যোগ করার জন্য বৈশিষ্ট্য

ভিন্ন ব্যাকগ্রাউন্ড ছবিগুলি কমা দ্বারা পৃথক করা হয়, এবং ছবিগুলি পরস্পরের উপর স্থাপিত হয়, যার মধ্যে প্রথম ছবি দর্শককে নিকটতম

নিম্নলিখিত উদাহরণে দুটি ব্যাকগ্রাউন্ড ছবি আছে, প্রথম ছবি ফুল (তালা এবং ডানদিকে মিলিত হয়), দ্বিতীয় ছবি কাগজ ব্যাকগ্রাউন্ড (ডানদিক এবং উপরদিকে মিলিত হয়):

প্রদত্ত

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

আপনার হাতে পরীক্ষা করুন

বহুবক্তক ব্যাকগ্রাউন্ড ছবি একক ব্যাকগ্রাউন্ড বৈশিষ্ট্য (যেমন উপরে উল্লেখ করা হয়েছে) বা background সংক্ষিপ্ত বৈশিষ্ট্য দ্বারা সুনির্দিষ্ট করা হয়。

নিম্নলিখিত উদাহরণে background সংক্ষিপ্ত বৈশিষ্ট্য (ফলাফল উপরের উদাহরণের মতো):

প্রদত্ত

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

আপনার হাতে পরীক্ষা করুন

CSS ব্যাকগ্রাউন্ড সাইজ

CSS background-size এই প্রতিশব্দটি আপনাকে ব্যাকগ্রাউন্ড ইমেজের মাপ নির্ধারণ করতে দেয়。

ব্যাকগ্রাউন্ড ইমেজের মাপকে নির্দিষ্ট করতে, লঙ্ঘণ, পারসেন্টেজ বা নিচের দুটি কীভাবের মাধ্যমে ব্যবহার করা যেতে পারে:contain বা cover.

এই উদাহরণটিতে, ব্যাকগ্রাউন্ড ইমেজের মাপকে প্রকৃত ইমেজের তুলনায় খুবই ছোট করা হয় (পিক্সেল দ্বারা):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

এই কোডটি হল:

প্রদত্ত

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

আপনার হাতে পরীক্ষা করুন

background-size এর অন্য দুটি সম্ভাব্য মান হল: contain এবং cover.

contain ব্যাকগ্রাউন্ড ইমেজকে যতটা সম্ভব বড় করা হয়, কিন্তু তার প্রস্থ ও উচ্চতা কনটেন্ট এরিয়ার সাথে সাযুজ্য রাখতে হবে। এইভাবে, ব্যাকগ্রাউন্ড ইমেজ ও ব্যাকগ্রাউন্ড লোকেশন এরিয়ার অনুপাত অনুযায়ী, ব্যাকগ্রাউন্ড ইমেজ দ্বারা আবৃত না থাকা কিছু ব্যাকগ্রাউন্ড এরিয়া থাকতে পারে。

cover কীভাবে ব্যাকগ্রাউন্ড ইমেজকে ক্ষুদ্র করা হয়, যাতে কনটেন্ট এরিয়াটি সম্পূর্ণভাবে ব্যাকগ্রাউন্ড ইমেজ দ্বারা আবৃত হয় (যার প্রস্থ ও উচ্চতা কনটেন্ট এরিয়ার সমান বা বেশি হবে)। এইভাবে, ব্যাকগ্রাউন্ড ইমেজের কিছু অংশ ব্যাকগ্রাউন্ড লোকেশন এরিয়ায় দেখা যাবে না。

নিচের উদাহরণ দেখে নিন: contain এবং cover এর ব্যবহার:

প্রদত্ত

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

আপনার হাতে পরীক্ষা করুন

একাধিক ব্যাকগ্রাউন্ড ইমেজের মাপ নির্ধারণ

বহুবক্তব্য ব্যাকগ্রাউন্ডকে সম্পাদনা করার সময়background-size এই প্রতিশব্দটি একাধিক ব্যাকগ্রাউন্ড সাইজ মানকেও গ্রহণ করতে পারে (কমা-দ্বারা বিভক্ত তালিকায়)。

এই উদাহরণটি তিনটি ব্যাকগ্রাউন্ড ইমেজকে নির্দিষ্ট করে, এগুলোর প্রত্যেকটির background-size মান বিভিন্ন হয়:

প্রদত্ত

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

আপনার হাতে পরীক্ষা করুন

পূর্ণ পড়ামাপক বেকগ্রাউন্ড চিত্র

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

বিস্তারিত নির্দেশনা নিম্নরূপ:

  • চিত্রকে পূর্ণ পাতা জুড়ে ফুলবার করুন (শূন্য স্পেস নেই)
  • প্রয়োজনীয়তা অনুযায়ী চিত্রকে সমতুল্য করুন
  • পাতায় চিত্রকে কেন্দ্রীভূত করুন
  • স্ক্রোল বার্তা উত্পন্ন করতে পারে না

নিচের উদাহরণটি দেখে নিন যেভাবে তা করা যায়: <html> ইলিমেন্ট (এই <html> ইলিমেন্টটি অন্ততঃ ব্রাউজার উইন্ডোর উচ্চতা) এর উপর একটি স্থায়ী এবং কেন্দ্রীভূত বেকগ্রাউন্ড সেট করুন। শেষপর্যন্ত background-size বৈশিষ্ট্যটি ব্যবহার করে এটা মাপন করুন:

প্রদত্ত

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

আপনার হাতে পরীক্ষা করুন

হেরো ইমেজ

আপনি আরও <div> এক্সেম্প্লার ব্যবহার করে হেরো ইমেজ (টেক্সটসহ বড় চিত্র) তৈরি করতে পারেন এবং যে স্থানে চান সেখানে রাখতে পারেন।

প্রদত্ত

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

আপনার হাতে পরীক্ষা করুন

CSS background-origin এট্রিবিউট

CSS background-origin বৈশিষ্ট্যটি বেকগ্রাউন্ড চিত্রের অবস্থানটি নির্দেশ করে。

এই বৈশিষ্ট্যটি তিনটি ভিন্ন মান গ্রহণ করে:

  • border-box - বেকগ্রাউন্ড চিত্রটি বর্তনীর উপর ডানদিকের উপর থেকে শুরু করে
  • padding-box - বেকগ্রাউন্ড চিত্রটি প্যাডিং বার্তার বাইরের উপর ডানদিকের উপর থেকে শুরু করে (ডিফল্ট)
  • content-box - বেকগ্রাউন্ড চিত্রটি কনটেন্টের উপর ডানদিকের উপর থেকে শুরু করে

নিচের উদাহরণ দেখে নিন: background-origin বৈশিষ্ট্যসমূহ:

প্রদত্ত

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

আপনার হাতে পরীক্ষা করুন

CSS background-clip এট্রিবিউট

CSS background-clip বৈশিষ্ট্যটি বেকগ্রাউন্ডের চিত্রায়িত অঞ্চলটি নির্দেশ করে。

এই বৈশিষ্ট্যটি তিনটি ভিন্ন মান গ্রহণ করে:

  • border-box - বেকগ্রাউন্ডকে বর্তনীর বাইরের মূল সীমানায় চিত্রায়িত করা (ডিফল্ট)
  • padding-box - বেকগ্রাউন্ডকে প্যাডিং বার্তার বাইরের মূল সীমানায় চিত্রায়িত করা
  • content-box - বেকগ্রাউন্ডকে কনটেন্ট বক্সে চিত্রায়িত করা

নিচের উদাহরণ দেখে নিন: background-clip বৈশিষ্ট্যসমূহ:

প্রদত্ত

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

আপনার হাতে পরীক্ষা করুন

CSS অতিউচ্চগতির পিন্নলগ্রহণ এট্রিবিউট

এট্রিবিউট বর্ণনা
background একটি বিবৃতিতে সমস্ত পিন্নলগ্রহণ এট্রিবিউট সংজ্ঞায়িত করার জন্য সংক্ষিপ্ত এট্রিবিউট
background-clip পিন্নলগ্রহণের ড্রাইং অঞ্চল নির্ধারণ করুন
background-image একটি বা একাধিক পিন্নলগ্রহণ ইমেজ সংজ্ঞায়িত করুন
background-origin পিন্নলগ্রহণ ইমেজের স্থান নির্ধারণ করুন
background-size পিন্নলগ্রহণ ইমেজের মাপ নির্ধারণ করুন