CSS ব্যাকগ্রাউন্ড ইমেজ:ধাপে ধাপে গাইড

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

ট্যাগ সংজ্ঞায়িত করেছি ক্লাস “হেডার” সহ। এই ট্যাগটি ওয়েব পেজে "কফি গ্রাইন্ডে স্বাগতম" লেখাটি দেখায়।

আমাদের CSS ফাইলে, আমরা "ইমেজ" নামক একটি HTML ক্লাসের জন্য একটি নিয়ম সংজ্ঞায়িত করেছি। এটি আমাদের ব্যানারের জন্য একটি পটভূমি চিত্র সেট করে এবং আমাদের ব্যানারের উচ্চতা 250px এ সেট করে। তারপরে আমরা "হেডার" নামক একটি ক্লাস সংজ্ঞায়িত করেছি, যেটি আমাদের হেডারে লেখা স্টাইল করতে ব্যবহৃত হয়।

"হেডার" ক্লাস আমাদের হেডার টেক্সটের উপরে একটি 50px প্যাডিং প্রয়োগ করে। "শিরোনাম" শ্রেণী পাঠ্যের রঙ সাদাতে সেট করে। আমাদের শৈলী হেডারের ফন্ট সাইজ 20px এ সেট করে এবং হেডারটিকে উপাদানের কেন্দ্রে সারিবদ্ধ করে।

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

ব্যাকগ্রাউন্ড-ইমেজ প্রপার্টি আপনাকে CSS-এর একটি উপাদানে একাধিক ব্যাকগ্রাউন্ড ইমেজ বরাদ্দ করতে দেয়। একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার জন্য সিনট্যাক্স নিম্নরূপ:

background-image: url(image1), url(image2);

নির্দিষ্ট করা প্রথম চিত্রটি উপাদানের শীর্ষে প্রদর্শিত হবে এবং পরবর্তী উপাদানগুলি একে অপরের পিছনে প্রদর্শিত হবে। ধরুন আমরা আমাদের ব্যানারের সামনে একটি কফি কাপের একটি আইকন যোগ করতে চেয়েছিলাম। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://img.icons8.com/wired/64/000000/coffee.png), url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

আমাদের কোড ফিরে আসে:

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

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

আপনি যখন ব্যাকগ্রাউন্ড-ইমেজ প্রোপার্টি নিয়ে কাজ করছেন, তখন আপনি এর কন্টেইনারের মধ্যে ব্যাকগ্রাউন্ড ইমেজের আকার কাস্টমাইজ করতে চাইতে পারেন। এই উদ্দেশ্যে ব্যাকগ্রাউন্ড-আকার সম্পত্তি ব্যবহার করা হয়।

ব্যাকগ্রাউন্ড-আকারের বৈশিষ্ট্য চারটি সম্ভাব্য মান গ্রহণ করে। এগুলো হল:

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

পটভূমির আকার পরিবর্তন করা হচ্ছে

ধরুন আমরা আগে থেকে আমাদের কফি ব্যানার ইমেজ আমাদের উপাদান মধ্যে থাকা চাই. এর অর্থ হল সম্পূর্ণ চিত্রটি দৃশ্যমান হওয়া উচিত, এমনকি যদি এটি ধারকটি পূরণ না করে। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 250px;
}

আমাদের কোড ফিরে আসে:

আপনি দেখতে পাচ্ছেন, আমাদের প্রথম উদাহরণের বিপরীতে, আমাদের সম্পূর্ণ পটভূমি চিত্রটি দৃশ্যমান। কারণ আমরা আমাদের কোডে ব্যাকগ্রাউন্ড-আকারের প্রপার্টি নির্দিষ্ট করেছি এবং এর মান ধারণ করে সেট করেছি . বিকল্পভাবে, আমরা কভার ব্যবহার করতে পারতাম মান যদি আমরা চাই যে আমাদের ছবিটি পুরো পাত্রের আকারকে কভার করবে।

আপনি ছবির জন্য একটি পিক্সেল আকারও নির্দিষ্ট করতে পারেন। আসুন আমরা বলি যে আমরা চাই আমাদের শৈলীর ছবি 200px লম্বা বা 200px চওড়া হোক। আমরা নিম্নলিখিত কোড ব্যবহার করে তা করতে পারি:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 200px;
	width: 200px;
}

আমাদের কোড ফিরে আসে:

এই উদাহরণে, আমাদের ছবিটি 200px চওড়া এবং 200px লম্বা৷

৷

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

ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টি আপনাকে ওয়েব এলিমেন্টের বিষয়বস্তু, সীমানা বা প্যাডিং অনুযায়ী ব্যাকগ্রাউন্ড ইমেজ স্থাপন করতে দেয়।

ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টি তিনটি সম্ভাব্য মান গ্রহণ করে:

• বর্ডার-বক্স:সীমানা বাক্সের সাপেক্ষে প্রদর্শিত হওয়ার জন্য চিত্রটিকে অবস্থান করে।
• সামগ্রী-বক্স:বিষয়বস্তু বাক্সের সাপেক্ষে প্রদর্শিত হওয়ার জন্য চিত্রটিকে অবস্থান করে।
• প্যাডিং-বক্স:প্যাডিং বক্সের (ডিফল্ট) সাপেক্ষে প্রদর্শিত হওয়ার জন্য চিত্রটিকে অবস্থান করে।

সীমানা, বিষয়বস্তু এবং প্যাডিং সম্পর্কে আরও জানতে, CSS বক্স মডেলের জন্য আমাদের গাইড পড়ুন।

ধরা যাক যে আমরা আমাদের চিত্রের অবস্থান সামঞ্জস্য করতে চাই। আপনি, উদাহরণস্বরূপ, নিম্নলিখিত কোডটি ব্যবহার করে বিষয়বস্তু বাক্সের সাথে সাপেক্ষে একটি পটভূমি চিত্র তৈরি করতে পারেন:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	border: 10px solid black;
	padding: 25px;
	background-origin: content-box;
	background-repeat: no-repeat;
	height: 250px;
}

আমাদের কোড ফিরে আসে:

এই উদাহরণে, আমাদের ব্যাকগ্রাউন্ড ইমেজ বিষয়বস্তু বাক্সের সাপেক্ষে প্রদর্শিত হয়। আপনি দেখতে পাচ্ছেন, আমাদের ছবির সীমানা এবং ব্যাকগ্রাউন্ড ইমেজের মধ্যে একটি সাদা ফাঁক রয়েছে। এটি আপেক্ষিক ব্যাকগ্রাউন্ড অবস্থান দেখায় যেখানে আমাদের ছবিটি প্রদর্শিত হয়৷

আমরা ব্যাকগ্রাউন্ড-অরিজিন:বিষয়বস্তু-বক্স সম্পত্তি নির্দিষ্ট করে এটি অর্জন করেছি। আমরা ব্যাকগ্রাউন্ড-রিপিট:নো-রিপিট প্রপার্টি নির্দিষ্ট করেছি। এই সম্পত্তি আমাদের ছবিকে এর বিষয়বস্তু বাক্সে সীমাবদ্ধ করে। ব্যাকগ্রাউন্ড-অরিজিন প্রোপার্টি দ্বারা তৈরি ফাঁকা জায়গায় ছবিটি প্রদর্শিত হবে না।

উপসংহার

আমরা সিএসএস-এ একটি ইমেজে একটি উপাদানের পটভূমি সেট করতে ব্যাকগ্রাউন্ড-ইমেজ প্রপার্টি ব্যবহার করি। এই কৌশলটি আপনাকে ছবি থেকে কাস্টম ব্যাকগ্রাউন্ড তৈরি করতে দেয়। এটি রং বা গ্রেডিয়েন্ট ব্যবহার করার একটি বিকল্প।

এই নিবন্ধে, আমরা আলোচনা করেছি কিভাবে ব্যাকগ্রাউন্ড-ইমেজ প্রপার্টি ব্যবহার করতে হয় এবং কিভাবে CSS-এ ব্যাকগ্রাউন্ড ইমেজ স্টাইল করা যায়। এখন আপনার কাছে একটি বিশেষজ্ঞের মতো CSS-এ ব্যাকগ্রাউন্ড ইমেজ ডিজাইন করা শুরু করার জন্য প্রয়োজনীয় জ্ঞান রয়েছে।