এই ম্যানুয়ালটিতে, আমরা বিস্তারিতভাবে পটভূমি এবং পটভূমি-রঙের বৈশিষ্ট্যগুলির মধ্যে পার্থক্য শিখব।
চল শুরু করি!
CSS ব্যাকগ্রাউন্ড প্রপার্টি
যেকোনো এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ড সামঞ্জস্য করতে, CSS “ পটভূমি 'সম্পত্তি ব্যবহার করা হয়. এটি আরও আটটি বৈশিষ্ট্যের একটি শর্টহ্যান্ড সম্পত্তি যার মানে আপনি এক লাইনে তাদের সব ব্যবহার করতে পারেন। এই অন্যান্য বৈশিষ্ট্য হল:
- পেছনের রং
- ব্যাকগ্রাউন্ড-ইমেজ
- ব্যাকগ্রাউন্ড-অবস্থান
- ব্যাকগ্রাউন্ড সাইজ
- পটভূমি পুনরাবৃত্তি
- পটভূমি-উৎপত্তি
- ব্যাকগ্রাউন্ড-ক্লিপ
- পৃষ্ঠভূমি সংযুক্তি
বাক্য গঠন
এখানে পটভূমি সম্পত্তির সিনট্যাক্স আছে:
পটভূমি: রঙ ইমেজ অবস্থান/আকার পুনরাবৃত্তি মূল ক্লিপ সংযুক্তি
চলুন এক এক করে উপরে উল্লিখিত সমস্ত বৈশিষ্ট্যের ব্যাখ্যায় চলে যাই।
CSS ব্যাকগ্রাউন্ড-কালার প্রপার্টি
ব্যবহার করে ' পেছনের রং ” সম্পত্তি, আপনি ব্যাকগ্রাউন্ডের রঙ সেট করতে পারেন। রঙটি HTML উপাদানগুলির পিছনে প্রদর্শিত হবে।
বাক্য গঠন
ব্যাকগ্রাউন্ড-কালার প্রপার্টির সিনট্যাক্স হল:
পেছনের রং : রঙপরিবর্তে ' রঙ ”, আপনি উপাদানগুলির পিছনে প্রদর্শিত পটভূমির রঙ সেট করতে পারেন।
উদাহরণ
প্রথমে, HTML ফাইলে, আমরা
এইচটিএমএল
< div >< h1 > লিনাক্স হিন্ট < / h1 >
< পি > আমাদের ওয়েব সাইটে আপনাকে স্বাগতম < / পি >
< / div >
CSS-এ, আমরা div-এর উচ্চতা সামঞ্জস্য করব “ 100% ' এটিকে পুরো পৃষ্ঠায় প্রদর্শিত করতে এবং পাঠ্যের ফন্ট-সাইজ হিসাবে ' xx-বড় ” এর পরে, পটভূমির রঙ হিসাবে সেট করুন ' জলজ ”
সিএসএস
div {উচ্চতা : 100% ;
অক্ষরের আকার : xx-বড় ;
পেছনের রং : জলজ ;
}
নীচের দেওয়া ছবিতে, আপনি দেখতে পারেন যে পটভূমির রঙ প্রয়োগ করা হয়েছে:
CSS ব্যাকগ্রাউন্ড-ইমেজ প্রপার্টি
দ্য ' ব্যাকগ্রাউন্ড-ইমেজ HTML উপাদানগুলির পটভূমি হিসাবে এক বা একাধিক ছবি সেট করতে সম্পত্তি ব্যবহার করা হয়। আপনি বিভিন্ন উপাদানের জন্য বিভিন্ন ব্যাকগ্রাউন্ড ইমেজ যোগ করতে এই সম্পত্তি ব্যবহার করতে পারেন.
বাক্য গঠন
ব্যাকগ্রাউন্ড-ইমেজ প্রপার্টির সিনট্যাক্স হল:
ব্যাকগ্রাউন্ড-ইমেজ: url()এখানে, আপনি যে চিত্রটিকে একটি পটভূমি হিসাবে সেট করতে চান তার পাথ দিন একটি যুক্তি হিসাবে ' url() ”
উদাহরণ
পূর্ববর্তী উদাহরণের ধারাবাহিকতায়, 'এ একটি পটভূমি চিত্র যোগ করুন div 'শ্রেণী। আমরা ছবির url যোগ করব ' url(img.jpg) ”:
div {...
ব্যাকগ্রাউন্ড-ইমেজ : url ( img.jpg ) ;
}
নীচের প্রদত্ত আউটপুট নির্দেশ করে যে ব্যাকগ্রাউন্ড ইমেজ সফলভাবে যোগ করা হয়েছে:
নোট করুন যে ছবিটি পুনরাবৃত্তি হয়। এই সমস্যাটি সমাধান করতে, পরবর্তী সম্পত্তি দেখুন।
CSS ব্যাকগ্রাউন্ড-রিপিট প্রপার্টি
যখন আপনি একটি ওয়েব পৃষ্ঠায় একটি পটভূমি হিসাবে একটি ছবি যোগ করেন, এটি ডিফল্টরূপে পুনরাবৃত্তি হয়। এই পুনরাবৃত্তি এড়াতে এবং আপনার পছন্দ অনুযায়ী প্যাটার্ন সেট করুন, ' পটভূমি পুনরাবৃত্তি 'সম্পত্তি ব্যবহার করা হয়.
বাক্য গঠন
ব্যাকগ্রাউন্ড-রিপিট প্রপার্টির সিনট্যাক্স হল:
পটভূমি পুনরাবৃত্তি : পুনরাবৃত্তি | পুনরাবৃত্তি-এক্স | পুনরাবৃত্তি-y | no-পুনরাবৃত্তিব্যাকগ্রাউন্ড-রিপিট প্রপার্টির উল্লিখিত মানগুলির বিবরণ নীচে দেওয়া হল:
- পুনরাবৃত্তি: এটি উল্লম্ব এবং অনুভূমিক উভয় দিকেই চিত্রটি পুনরাবৃত্তি করতে ব্যবহৃত হয়।
- পুনরাবৃত্তি-এক্স: এটি শুধুমাত্র অনুভূমিকভাবে চিত্রের পুনরাবৃত্তি সেট করতে ব্যবহৃত হয়।
- পুনরাবৃত্তি-y: এটি চিত্রের উল্লম্ব পুনরাবৃত্তি নির্দিষ্ট করে।
- অ-পুনরাবৃত্তি: এটি চিত্রের পুনরাবৃত্তি এড়াতে ব্যবহৃত হয়।
উদাহরণ
এখানে, আমরা ব্যাকগ্রাউন্ড-রিপিট প্রপার্টির মান সেট করব “ no-পুনরাবৃত্তি ”:
div {...
পটভূমি পুনরাবৃত্তি : no-পুনরাবৃত্তি ;
}
উপরে প্রদত্ত কোডের ফলাফল নীচে দেওয়া হল। আপনি দেখতে পারেন যে ছবিটি আর পুনরাবৃত্তি হয় না:
CSS ব্যাকগ্রাউন্ড-পজিশন প্রপার্টি
পটভূমি চিত্রের অবস্থান নির্ধারণ করতে, ' ব্যাকগ্রাউন্ড-অবস্থান ” সম্পত্তি ব্যবহার করা হয়। এটি আপনাকে বিভিন্ন অবস্থানে যেমন বাম শীর্ষ, বাম কেন্দ্র, বাম নীচে, ডান শীর্ষ, ডান কেন্দ্র এবং আরও অনেক কিছুতে চিত্র সামঞ্জস্য করতে দেয়।
বাক্য গঠন
ব্যাকগ্রাউন্ড-পজিশন প্রপার্টির সিনট্যাক্স হল:
ব্যাকগ্রাউন্ড-অবস্থান : মানপরিবর্তে ' মান ”, আপনি চিত্রের অবস্থান নির্দিষ্ট করতে পারেন।
উদাহরণ
এখানে, আমরা ব্যাকগ্রাউন্ড-পজিশন সেট করব “ কেন্দ্র ”:
div {...
ব্যাকগ্রাউন্ড-অবস্থান : কেন্দ্র ;
}
নীচের আউটপুটে, চিত্রটি পৃষ্ঠার কেন্দ্রে প্রদর্শিত হবে:
CSS ব্যাকগ্রাউন্ড-আকার সম্পত্তি
ব্যাকগ্রাউন্ড ইমেজের সাইজ সেট করার জন্য, ' ব্যাকগ্রাউন্ড সাইজ ” সম্পত্তি ব্যবহার করা হয়।
বাক্য গঠন
ব্যাকগ্রাউন্ড-সাইজের নিম্নলিখিত সিনট্যাক্স রয়েছে:
ব্যাকগ্রাউন্ড সাইজ : দৈর্ঘ্য|কভারব্যাকগ্রাউন্ড-আকার সম্পত্তির মানগুলির বর্ণনা নিম্নরূপ:
- দৈর্ঘ্য: এটি ব্যাকগ্রাউন্ড ইমেজের প্রস্থ এবং উচ্চতা ঠিক করতে ব্যবহৃত হয়।
- আবরণ: পুরো ব্যাকগ্রাউন্ডে ব্যাকগ্রাউন্ড ইমেজ সামঞ্জস্য করতে এটি ব্যবহার করা হয়।
উদাহরণ
আমরা পটভূমির আকার হিসাবে সেট করব ' 100% 'উচ্চতা এবং' 80% 'প্রস্থ:
div {...
ব্যাকগ্রাউন্ড সাইজ : 100% 80% ;
}
আপনি দেখতে পাচ্ছেন যে নির্দিষ্ট মাত্রার উপর ভিত্তি করে চিত্রটির আকার পরিবর্তন করা হয়েছে:
CSS ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টি
দ্য ' পটভূমি-উৎপত্তি ” প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের পজিশনিং এরিয়া সামঞ্জস্য করতে ব্যবহার করা হয়। চিত্রটি ডিফল্ট হিসাবে উপরের-বাম কোণে সামঞ্জস্য করা হয়েছে।
বাক্য গঠন
ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টির সিনট্যাক্স হল:
পটভূমি-উৎপত্তি : প্যাডিং-বক্স| বর্ডার-বক্স | সামগ্রী-বক্সব্যাকগ্রাউন্ড-অরিজিন প্রপার্টির মান নিচে বর্ণনা করা হয়েছে:
- প্যাডিং-বাক্স: এটি ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টির ডিফল্ট মান যা প্যাডিং এজ অনুযায়ী ব্যাকগ্রাউন্ড ইমেজের অবস্থান সামঞ্জস্য করতে ব্যবহৃত হয়।
- বর্ডার-বক্স: এটি ছবির বর্ডার-বক্স অনুযায়ী ছবি সেট করতে ব্যবহৃত হয়।
- বিষয়বস্তু-বাক্স: এটি ছবির বিষয়বস্তু অনুসারে ব্যাকগ্রাউন্ড ইমেজ সেট করতে ব্যবহার করা হয়।
বিঃদ্রঃ: ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টি কাজ করে না যদি ব্যাকগ্রাউন্ড-অ্যাটাচমেন্ট প্রপার্টির মান ' হিসেবে সেট করা থাকে স্থির ”
উদাহরণ
প্রথমে, পাত্রের চারপাশে একটি সীমানা তৈরি করুন। এখানে, আমরা পূর্ববর্তী উদাহরণটি চালিয়ে যাব এবং প্যাডিং মানটিকে ' হিসাবে সেট করব 10px ” এর পরে, সীমানা প্রস্থকে ' হিসাবে সামঞ্জস্য করুন 15px ', স্টাইল হিসাবে ' রিজ ', এবং রঙ হিসাবে ' rgb(1, 68, 68) ” শেষ পর্যন্ত, আমরা ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টির মান নির্ধারণ করব “ সামগ্রী-বক্স ”:
div {...
প্যাডিং : 10px ;
সীমান্ত : 15px রিজ rgb ( 1 , 68 , 68 ) ;
পটভূমি-উৎপত্তি : সামগ্রী-বক্স ;
}
উপরে-প্রদত্ত কোডের ফলাফল নীচে দেওয়া হল। আপনি দেখতে পারেন যে চিত্রের অবস্থান ডিভের বিষয়বস্তু অনুসারে সেট করা হয়েছে:
CSS ব্যাকগ্রাউন্ড-ক্লিপ প্রপার্টি
দ্য ' ব্যাকগ্রাউন্ড-ক্লিপ ' সম্পত্তি উপাদানটির পটভূমির রঙে কাজ করে। এটি আপনাকে একটি উপাদানের প্যাডিং, এর সীমানা এবং এর বিষয়বস্তুর মতো একটি উপাদানের বাইরে পটভূমির রঙ কতদূর প্রসারিত হয় তা নিয়ন্ত্রণ করতে দেয়।
বাক্য গঠন
ব্যাকগ্রাউন্ড-ক্লিপ সম্পত্তির সিনট্যাক্স হল:
পটভূমি-উৎপত্তি : বর্ডার-বক্স | প্যাডিং-বক্স | সামগ্রী-বক্সব্যাকগ্রাউন্ড-অরিজিন প্রপার্টির মান নিচে বর্ণনা করা হয়েছে:
- বর্ডার-বক্স: এটি ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টির ডিফল্ট মান যা সীমানার পিছনে পটভূমির রঙ সেট করতে ব্যবহৃত হয়।
- প্যাডিং-বাক্স: উপাদানটির প্যাডিং বাক্সের মধ্যে রঙ সামঞ্জস্য করতে এটি ব্যবহার করা হয়।
- বিষয়বস্তু-বাক্স: এটি উপাদানের বিষয়বস্তু অনুযায়ী পটভূমির রঙ সেট করতে ব্যবহৃত হয়।
উদাহরণ
আমরা পূর্ববর্তী উদাহরণটি চালিয়ে যাব এবং সীমানা শৈলীর মান পরিবর্তন করব “ বিন্দুযুক্ত ” ব্যাকগ্রাউন্ড-ক্লিপ প্রপার্টি বুঝতে। এর পরে, আমরা ব্যাকগ্রাউন্ড-ক্লিপ সম্পত্তির মান হিসাবে সেট করব “ প্যাডিং-বক্স ”:
div {...
ব্যাকগ্রাউন্ড-ক্লিপ : প্যাডিং-বক্স ;
}
আউটপুটটি বোঝায় যে সীমানা প্রান্তটি শেষ হলে সাদা পটভূমির রঙ প্রদর্শিত হচ্ছে:
CSS ব্যাকগ্রাউন্ড-অ্যাটাচমেন্ট প্রপার্টি
দ্য ' পৃষ্ঠভূমি সংযুক্তি পৃষ্ঠাটি স্ক্রোল করার সময় আচরণ বা চিত্র সামঞ্জস্য করতে সম্পত্তি ব্যবহার করা হয়। এর আচরণ অন্যান্য উপাদান বা স্থির সঙ্গে স্ক্রলিং সেট করা যেতে পারে.
বাক্য গঠন
ব্যাকগ্রাউন্ড-সংযুক্তি সম্পত্তির সিনট্যাক্স হল:
পৃষ্ঠভূমি সংযুক্তি : মানআপনি ব্যাকগ্রাউন্ড-সংযুক্তির মান হিসাবে সেট করতে পারেন ' স্থির 'ব্যাকগ্রাউন্ড ইমেজ ঠিক করতে বা' স্ক্রল ” ছবিটিকে পৃষ্ঠার সাথে স্ক্রোল করার অনুমতি দিতে।
বিঃদ্রঃ: ডিফল্টরূপে, ব্যাকগ্রাউন্ড-সংযুক্তি সম্পত্তির মান হিসাবে সেট করা হয় “ স্ক্রল ”
এটা দেখা যায় যে যোগ করা ব্যাকগ্রাউন্ড ইমেজ স্থির থাকে না যখন আমরা স্ক্রোল করি। এখন এই সমস্যাটি ঠিক করা যাক।
এটি করার জন্য, আমরা পটভূমি-সংযুক্তি সম্পত্তির মান হিসাবে সেট করি ' স্থির ”:
div {...
পৃষ্ঠভূমি সংযুক্তি : স্থির ;
}
এখানে ফলাফলটি দেখায় যে চিত্রটি স্থির করা হয়েছে:
এখন, ব্যাকগ্রাউন্ড এবং ব্যাকগ্রাউন্ড-কালার বৈশিষ্ট্যের মধ্যে তুলনা করার দিকে যান।
CSS ব্যাকগ্রাউন্ড বনাম ব্যাকগ্রাউন্ড-কালার
প্রদত্ত টেবিলটি তাদের বৈশিষ্ট্যগুলির ভিত্তিতে পটভূমি এবং পটভূমি-রঙের বৈশিষ্ট্যগুলিকে আলাদা করবে:
| বৈশিষ্ট্য | CSS ব্যাকগ্রাউন্ড | CSS ব্যাকগ্রাউন্ড-রঙ |
| টাইপ | এটি একটি সুপার সম্পত্তি। | এটি পটভূমি সম্পত্তির একটি উপ-সম্পত্তি। |
| কার্যকারিতা | এটি সমস্ত পটভূমি বৈশিষ্ট্য সেট করে। | এটি শুধুমাত্র পটভূমির রঙ সেট করে। |
| পরিসর | এটি সমস্ত পটভূমি বৈশিষ্ট্য সমর্থন করে | এটি শুধুমাত্র পটভূমি-রঙ সম্পত্তি সমর্থন করে |
| স্তর | যখন আপনাকে ব্যাকগ্রাউন্ডের একাধিক মান যোগ করতে হবে, তখন এটি ব্যবহার করা সহজ। আপনি একবারে সমস্ত পটভূমি বৈশিষ্ট্যের মান সেট করতে পারেন। | এটি ব্যবহার করা যেতে পারে যখন আপনাকে শুধুমাত্র একটি একক পটভূমির রঙ যোগ করতে হবে। |
| বাক্য গঠন | পটভূমি: মান (মানগুলি হল বিজি-কালার, বিজি-ইমেজ এবং অন্যান্য বৈশিষ্ট্য) |
background-color: রঙ |
ব্যাকগ্রাউন্ড-রঙের বৈশিষ্ট্যগুলি ব্যাকগ্রাউন্ড বৈশিষ্ট্য থেকে কীভাবে আলাদা তা ব্যাখ্যা করা হয়েছে।
উপসংহার
CSS “ পটভূমি ” প্রপার্টি হল একটি শর্টহ্যান্ড প্রপার্টি যা একবারে একাধিক ব্যাকগ্রাউন্ড মান সেট করতে ব্যবহৃত হয়, যেমন রঙ, ছবি, অবস্থান, আকার, উৎপত্তি এবং আরও অনেক কিছু। অন্য দিকে, ' পেছনের রং ” শুধুমাত্র ব্যাকগ্রাউন্ডে রঙ যোগ করতে ব্যবহৃত হয়। এই গাইডে, আমরা CSS ব্যাকগ্রাউন্ড প্রপার্টি এবং CSS ব্যাকগ্রাউন্ড-কালার প্রপার্টির মধ্যে পার্থক্য নিয়ে আলোচনা করেছি।