পটভূমি

CSS পডকাস্ট - 053: পটভূমি

প্রতিটি CSS বক্সের পিছনে একটি বিশেষ স্তর থাকে যাকে ব্যাকগ্রাউন্ড লেয়ার বলা হয়। CSS এটিতে অর্থপূর্ণ পরিবর্তন করার জন্য বিভিন্ন উপায় প্রদান করে – একাধিক ব্যাকগ্রাউন্ডের অনুমতি সহ।

ব্যাকগ্রাউন্ড লেয়ারগুলি ব্যবহারকারীর থেকে সবচেয়ে দূরে, একটি বাক্সের বিষয়বস্তুর পিছনে রেন্ডার করা হয় তার padding-box অঞ্চল থেকে শুরু করে। এটি ব্যাকগ্রাউন্ড লেয়ারটিকে সীমানার সাথে মোটেও ওভারল্যাপ না করতে সক্ষম করে।

পটভূমির রঙ

একটি পটভূমি স্তরে আপনি প্রয়োগ করতে পারেন এমন একটি সহজ প্রভাব হল রঙ সেট করা। background-color প্রাথমিক মান হল transparent , যা একজন অভিভাবকের বিষয়বস্তুকে দৃশ্যমান করার অনুমতি দেয়। একটি পটভূমি স্তরে একটি বৈধ রঙ সেট সেই উপাদানটিতে আঁকা অন্যান্য জিনিসের পিছনে বসে।

পটভূমি ছবি

background-color লেয়ারের উপরে, আপনি background-image প্রোপার্টি ব্যবহার করে একটি ব্যাকগ্রাউন্ড ইমেজ যোগ করতে পারেন। একটি background-image নিম্নলিখিতগুলি গ্রহণ করে:

• url CSS ফাংশন ব্যবহার করে একটি চিত্র URL বা ডেটা URI ।
• একটি গ্রেডিয়েন্ট CSS ফাংশন দ্বারা গতিশীলভাবে তৈরি একটি চিত্র।

url CSS ফাংশনের সাথে একটি পটভূমি-চিত্র সেট করা

CSS গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড

দুটি বা ততোধিক রঙ পাস করার সময় আপনাকে একটি পটভূমি-ইমেজ তৈরি করার অনুমতি দেওয়ার জন্য বেশ কয়েকটি গ্রেডিয়েন্ট CSS ফাংশন বিদ্যমান।

যে গ্রেডিয়েন্ট ফাংশনটি ব্যবহার করা হোক না কেন, ফলাফলের চিত্রটি উপলব্ধ স্থানের পরিমাণের সাথে মেলে অভ্যন্তরীণভাবে আকারযুক্ত ।

গ্রেডিয়েন্ট ফাংশন ব্যবহার করে একটি ব্যাকগ্রাউন্ড-ইমেজ প্রয়োগ করার উদাহরণ দেখানো ডেমো:

ব্যাকগ্রাউন্ড ইমেজ পুনরাবৃত্তি

ডিফল্টরূপে, পটভূমির চিত্রগুলি পটভূমি স্তরের সম্পূর্ণ স্থান পূরণ করতে অনুভূমিকভাবে এবং উল্লম্বভাবে পুনরাবৃত্তি করে।

নিম্নলিখিত মানগুলির মধ্যে একটি সহ background-repeat বৈশিষ্ট্য ব্যবহার করে এটি পরিবর্তন করুন:

• repeat : চিত্রটি উপলব্ধ স্থানের মধ্যে পুনরাবৃত্তি হয়, প্রয়োজন অনুসারে ক্রপ করা হয়।
• round : উপলব্ধ স্থানের মধ্যে যতগুলি দৃষ্টান্ত ফিট করার জন্য চিত্রটি অনুভূমিকভাবে এবং উল্লম্বভাবে পুনরাবৃত্তি করে। উপলব্ধ স্থান যত বাড়ে চিত্র প্রসারিত হয়, এবং চিত্রের মূল প্রস্থের অর্ধেক প্রসারিত করার পরে, আরও চিত্রের উদাহরণ যোগ করার জন্য সংকুচিত হয়।
• space : চিত্রটি ক্রপ না করে উপলব্ধ স্থানের মধ্যে যতগুলি দৃষ্টান্ত ফিট করার জন্য অনুভূমিকভাবে এবং উল্লম্বভাবে পুনরাবৃত্তি করে - প্রয়োজন অনুসারে চিত্রের দৃষ্টান্তগুলিকে ফাঁক করে। পুনরাবৃত্ত চিত্রগুলি একটি পটভূমি স্তর দখল করে স্থানের প্রান্তগুলিকে স্পর্শ করে, তাদের মধ্যে সাদা স্থান সমানভাবে বিতরণ করা হয়।

background-repeat প্রপার্টি আপনাকে স্বাধীনভাবে x এবং y অক্ষের জন্য আচরণ সেট করতে দেয়। প্রথম প্যারামিটারটি অনুভূমিক পুনরাবৃত্তি আচরণ সেট করে এবং দ্বিতীয় প্যারামিটারটি উল্লম্ব পুনরাবৃত্তি আচরণ সেট করে।

আপনি একটি একক মান ব্যবহার করলে, এটি অনুভূমিক এবং উল্লম্ব পুনরাবৃত্তি উভয় ক্ষেত্রেই প্রয়োগ করা হবে।

শর্টহ্যান্ডে আপনার অভিপ্রায়কে আরও পরিষ্কার করার জন্য সুবিধাজনক এক-শব্দের বিকল্প রয়েছে।

মান repeat-x একটি চিত্রকে শুধুমাত্র অনুভূমিকভাবে পুনরাবৃত্তি করে; এটি repeat no-repeat সমতুল্য।

নিম্নলিখিত ডেমো background-repeat সম্পত্তির এই ক্ষমতাগুলি প্রদর্শন করে:

পটভূমি অবস্থান

আপনি হয়তো লক্ষ্য করেছেন যখন ওয়েবে কিছু ছবি background-repeat: no-repeat ডিক্লেয়ারেশন দিয়ে স্টাইল করা হয়, এই ধরনের ছবি তাদের কন্টেইনারের উপরের বাম দিকে প্রদর্শিত হয়।

ব্যাকগ্রাউন্ড ইমেজের প্রারম্ভিক অবস্থান উপরে বাম। background-position প্রপার্টি আপনাকে ইমেজ পজিশন অফসেট করে এই আচরণ পরিবর্তন করতে দেয়।

background-repeat এর মতই, background-position প্রপার্টি আপনাকে ডিফল্টরূপে দুটি মান সহ x এবং y অক্ষ বরাবর ইমেজ স্থাপন করতে দেয়।

যখন CSS দৈর্ঘ্য এবং শতাংশ ব্যবহার করা হয়, প্রথম প্যারামিটারটি অনুভূমিক অক্ষের সাথে মিলে যায় যখন দ্বিতীয় প্যারামিটারটি উল্লম্ব অক্ষের সাথে মিলে যায়।

যখন কীওয়ার্ড শুধুমাত্র ব্যবহার করা হয় তখন কীওয়ার্ডের ক্রম কোন ব্যাপার না:

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

background-position প্রপার্টির একটি সুবিধাজনক একটি মান সংক্ষিপ্ত হস্ত আছে; বাদ দেওয়া মান 50% এ সমাধান করে। এখানে একটি উদাহরণ যা background-position প্রপার্টি গ্রহণ করে এমন কীওয়ার্ড ব্যবহার করে এটি প্রদর্শন করে:

এর ডিফল্ট দুটি প্যারামিটার ফর্ম এবং একটি প্যারামিটার ফর্ম ছাড়াও; background-position সম্পত্তি চারটি পরামিতি পর্যন্ত গ্রহণ করে;

যখন তিন বা চারটি পরামিতি ব্যবহার করা হয়, তখন একটি CSS দৈর্ঘ্য বা শতাংশ অবশ্যই top , left , right বা bottom কীওয়ার্ডের আগে থাকতে হবে যাতে ব্রাউজারটি CSS বক্সের কোন প্রান্ত থেকে অফসেটটি উৎপন্ন হয় তা গণনা করতে পারে।

যখন তিনটি প্যারামিটার ব্যবহার করা হয়, তখন একটি CSS দৈর্ঘ্য বা মান দ্বিতীয় বা তৃতীয় প্যারামিটার হতে পারে এবং অন্য দুটি কীওয়ার্ড হতে পারে; এটি যে কীওয়ার্ডটি সফল হবে সেটি সিএসএসের দৈর্ঘ্য বা মান অফসেটের সাথে মিলে যাওয়া প্রান্ত নির্ধারণ করতে ব্যবহার করা হবে। নির্দিষ্ট করা অন্যান্য কীওয়ার্ডের অফসেট 0 এ সেট করা হয়েছে।

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

যদি background-position: top left 20% একটি CSS ব্যাকগ্রাউন্ড ইমেজে প্রয়োগ করা হয়, ছবিটি বাক্সের শীর্ষে স্থাপন করা হয়, 20% মানটি বক্সের বাম থেকে একটি 20% অফসেট প্রতিনিধিত্ব করে (x অক্ষে)।

যদি background-position: top 20% left প্রয়োগ করা হয়, 20% মান CSS বক্সের (y অক্ষে) উপরে থেকে 20% অফসেটকে প্রতিনিধিত্ব করে এবং ছবিটির বাম দিকে স্থাপন করা হয়। বাক্স

যখন চারটি প্যারামিটার ব্যবহার করা হয়, তখন দুটি কীওয়ার্ড নির্দিষ্ট করা প্রতিটি কীওয়ার্ডের উৎপত্তির বিপরীতে একটি অফসেটের সাথে সম্পর্কিত দুটি মান দিয়ে জোড়া হয়। যদি background-position: bottom 20% right 30% একটি ব্যাকগ্রাউন্ড-ইমেজে প্রয়োগ করা হয়, পটভূমি-ইমেজটি নীচে থেকে 20% এবং CSS বক্সের ডান থেকে 30% অবস্থান করা হয়।

নিম্নলিখিত ডেমো এই আচরণ প্রদর্শন করে:

এখানে CSS এবং কীওয়ার্ড মানের মিশ্রণ ব্যবহার করে background-position প্রপার্টি ব্যবহার করার আরও উদাহরণ রয়েছে:

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

background-size বৈশিষ্ট্য ব্যাকগ্রাউন্ড ইমেজের আকার নির্ধারণ করে; ডিফল্ট ব্যাকগ্রাউন্ড ইমেজগুলি তাদের অন্তর্নিহিত (প্রকৃত) প্রস্থ, উচ্চতা এবং আকৃতির অনুপাতের উপর ভিত্তি করে আকার দেওয়া হয়।

background-size বৈশিষ্ট্য CSS দৈর্ঘ্য এবং শতাংশের মান বা নির্দিষ্ট কীওয়ার্ড ব্যবহার করে। প্রপার্টি দুটি পরামিতি গ্রহণ করে যা আপনাকে স্বাধীনভাবে একটি পটভূমির প্রস্থ এবং উচ্চতা পরিবর্তন করার অনুমতি দেয়।

background-size সম্পত্তি নিম্নলিখিত কীওয়ার্ডগুলি গ্রহণ করে:

• auto : যখন স্বাধীনভাবে ব্যবহার করা হয়, তখন পটভূমির চিত্রটি তার অন্তর্নিহিত প্রস্থ এবং উচ্চতার উপর ভিত্তি করে আকার দেওয়া হয়; যখন প্রস্থ (প্রথম প্যারামিটার) বা উচ্চতা (দ্বিতীয় প্যারামিটার) এর জন্য অন্য CSS মানের সাথে auto ব্যবহার করা হয়, তখন auto সেট করা মাত্রাটি চিত্রের প্রাকৃতিক অনুপাত বজায় রাখার জন্য প্রয়োজন অনুসারে আকার দেওয়া হয়। এটি background-size সম্পত্তির ডিফল্ট আচরণ।
• cover : ব্যাকগ্রাউন্ড লেয়ারের পুরো এলাকা জুড়ে। এর অর্থ হতে পারে চিত্রটি স্কেল বা ক্রপ করা হয়েছে৷
• contain : প্রসারিত বা ক্রপ না করে স্থান পূরণ করার জন্য চিত্রের আকার। ফলস্বরূপ, খালি স্থান থাকতে পারে যা চিত্রটির পুনরাবৃত্তি ঘটাতে পারে, যদি না background-repeat no-repeat সেট করা হয়।

পরের দুটি অন্য প্যারামিটার ছাড়াই একটি স্বতন্ত্র ফ্যাশনে ব্যবহার করার উদ্দেশ্যে করা হয়েছে৷

নিম্নলিখিত ডেমো এই কীওয়ার্ডগুলিকে কার্যে প্রদর্শন করে:

background-size এই কীওয়ার্ড প্রয়োগ করার ডেমো প্রদর্শন করছে:

পটভূমি সংযুক্তি

background-attachment প্রপার্টি আপনাকে ব্যাকগ্রাউন্ড ইমেজগুলির স্থির অবস্থানের আচরণ পরিবর্তন করতে সক্ষম করে (একটি ব্যাকগ্রাউন্ড লেয়ারের ইমেজ অংশ) একবার স্ক্রিনে লেয়ারটি দৃশ্যমান হয়।

এটি 3টি কীওয়ার্ড গ্রহণ করে: scroll , fixed এবং local ।

background-attachment সম্পত্তির ডিফল্ট আচরণ হল scroll প্রাথমিক মান। যখন আরও স্থানের প্রয়োজন হয়, তখন চিত্রগুলি সেই স্থানের সাথে CSS বক্সের সীমানা দ্বারা নির্ধারিত পটভূমি স্তরের মধ্যে স্থানান্তরিত হয়।

fixed মান ব্যবহার করে ভিউপোর্টে ব্যাকগ্রাউন্ড ইমেজের অবস্থান ঠিক করে।

একবার ব্যাকগ্রাউন্ড লেয়ার ইমেজগুলির স্থানটি আসলে অফস্ক্রিনে স্ক্রোল করা (বা রেন্ডার করা) প্রয়োজন, ব্যাকগ্রাউন্ড লেয়ারের মধ্যে থাকা ছবিগুলি আসল অবস্থানে স্থির থাকে যতক্ষণ না ভিউপোর্টের মাধ্যমে পুরো লেয়ারটি স্ক্রীন বন্ধ হয়ে যায় ততক্ষণ পর্যন্ত ব্যাকগ্রাউন্ড লেয়ারটি তাদের থাকতে সক্ষম করে। .

local কীওয়ার্ড উপাদানের বিষয়বস্তুর সাপেক্ষে পটভূমি চিত্রের অবস্থানকে স্থির করতে সক্ষম করে। ব্যাকগ্রাউন্ড ইমেজগুলি এখন তাদের দখলকৃত স্থান বরাবর স্থানান্তরিত হয় কারণ সেই স্থানটি CSS বক্সের সীমানার ভিতরে এবং বাইরে রেন্ডার করে (সাধারণত স্ক্রলিং, 2D বা 3D রূপান্তরের কারণে)।

পটভূমির উৎপত্তি

background-origin প্রপার্টি আপনাকে একটি নির্দিষ্ট বাক্সের সাথে যুক্ত ব্যাকগ্রাউন্ডের এলাকা পরিবর্তন করতে সক্ষম করে। সম্পত্তি যে মানগুলি গ্রহণ করে তা একটি বাক্সের border-box , padding-box এবং content-box অঞ্চলগুলির সাথে সামঞ্জস্যপূর্ণ।

নিম্নলিখিত ডেমো ব্যবহার করে এই বিকল্পগুলি চেষ্টা করুন:

ব্যাকগ্রাউন্ড ক্লিপ

background-clip প্রপার্টি background-origin প্রোপার্টি দ্বারা তৈরি করা সীমা নির্বিশেষে একটি পটভূমি স্তর থেকে দৃশ্যত যা দেখা যায় তা নিয়ন্ত্রণ করে।

background-origin মতো যে অঞ্চলগুলি নির্দিষ্ট করা যেতে পারে তা হল border-box , padding-box , এবং content-box যেখানে একটি CSS ব্যাকগ্রাউন্ড লেয়ার রেন্ডার করা যেতে পারে। যখন এই কীওয়ার্ডগুলি ব্যবহার করা হয়, নির্দিষ্ট অঞ্চলের চেয়ে পটভূমির যেকোনো রেন্ডারিং ক্রপ বা ক্লিপ করা হবে।

background-clip প্রপার্টি একটি text কীওয়ার্ডও গ্রহণ করে যা পটভূমিকে ক্লিপ করে কন্টেন্ট বক্সের মধ্যে থাকা টেক্সট ছাড়া। এই প্রভাবটি একটি CSS বক্সের মধ্যে প্রকৃত পাঠ্যে স্পষ্ট হওয়ার জন্য, পাঠ্যটি আংশিক বা সম্পূর্ণ স্বচ্ছ হতে হবে।

একটি অপেক্ষাকৃত নতুন প্রপার্টি, এই লেখার সময়, Chrome এবং বেশিরভাগ ব্রাউজারে এই প্রপার্টি ব্যবহার করার জন্য -webkit- প্রিফিক্স প্রয়োজন।

একাধিক ব্যাকগ্রাউন্ড

মডিউলের শুরুতে উল্লিখিত হিসাবে, পটভূমি স্তর একাধিক সাবলেয়ারকে সংজ্ঞায়িত করার অনুমতি দেয়। সংক্ষিপ্ততার জন্য, আমি এই উপস্তরগুলিকে ব্যাকগ্রাউন্ড হিসাবে উল্লেখ করব।

একাধিক পটভূমি উপরে থেকে নীচে সংজ্ঞায়িত করা হয়; প্রথম ব্যাকগ্রাউন্ডটি ব্যবহারকারীর সবচেয়ে কাছের, যখন শেষ ব্যাকগ্রাউন্ডটি ব্যবহারকারীর থেকে সবচেয়ে দূরে।

শুধুমাত্র সংজ্ঞায়িত পটভূমি বা শেষ স্তরটিকে ব্রাউজার দ্বারা চূড়ান্ত পটভূমি স্তর মনোনীত করা হয়। শুধুমাত্র এই স্তরটিকে একটি background-color বরাদ্দ করার অনুমতি দেওয়া হয়েছে।

নীচের কোড স্নিপেট এবং লাইভ ডেমোতে প্রদর্শিত হিসাবে কমা দ্বারা বিভক্ত বেশিরভাগ পটভূমি-সম্পর্কিত CSS বৈশিষ্ট্যগুলি ব্যবহার করে একাধিক স্তর পৃথকভাবে কনফিগার করা যেতে পারে।

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

ব্যাকগ্রাউন্ড শর্টহ্যান্ড

একটি বাক্সের ব্যাকগ্রাউন্ড লেয়ার স্টাইল করা সহজ করার জন্য-বিশেষ করে যখন একাধিক ব্যাকগ্রাউন্ড লেয়ার কাঙ্খিত হয়-এখানে একটি শর্টহ্যান্ড আছে যা নিম্নলিখিত নির্দিষ্ট প্যাটার্ন অনুসরণ করে:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

একাধিক ব্যাকগ্রাউন্ড ঘোষণা করার শর্টহ্যান্ড আকারে ক্রম গুরুত্বপূর্ণ। অবস্থান এবং আকারের মান উভয়ই একটি স্ল্যাশ ( / ) দ্বারা পৃথক করা আবশ্যক। সঠিক ক্রমে উৎপত্তি এবং ক্লিপ আচরণ ঘোষণা করা আপনাকে একই সাথে উভয়ের জন্য বৈধ কীওয়ার্ড সেট করার সুবিধা নিতে দেয়

নিম্নলিখিত ঘোষণাটি পটভূমি ক্লিপ করে এবং বিষয়বস্তু বাক্স থেকে এটি উদ্ভূত হয়:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

এই শর্টহ্যান্ড শব্দার্থকে মাথায় রেখে, কোড স্নিপেটের পূর্ববর্তী পটভূমি-সম্পর্কিত ঘোষণাগুলিকে নিম্নলিখিত হিসাবে পুনরায় লেখা যেতে পারে:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

আপনার উপলব্ধি পরীক্ষা করুন

CSS ব্যাকগ্রাউন্ড সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন