HTML Background Images

এইচটিএমএল ব্যাকগ্রাউন্ড ইমেজ

একটি HTML উপাদানে ব্যাকগ্রাউন্ড ইমেজ

একটি HTML উপাদানে একটি পটভূমি চিত্র যোগ করতে, HTML শৈলী বৈশিষ্ট্য এবং CSS ব্যাকগ্রাউন্ড-ইমেজ বৈশিষ্ট্য ব্যবহার করুন:

উদাহরণ

<p> উপাদানে একটি পটভূমি চিত্র যোগ করুন:

<p style="background-image: url('img_girl.jpg');">

আপনি <head> বিভাগে <style> উপাদানটিতে একটি পটভূমি চিত্রও নির্দিষ্ট করতে পারেন:

উদাহরণ

<style>
p {
  background-image: url('img_girl.jpg');
}
</style>
Background Image Example

পৃষ্ঠায় পটভূমি চিত্র

আপনি যদি সমগ্র পৃষ্ঠার জন্য একটি ব্যাকগ্রাউন্ড ইমেজ চান, তাহলে <body> উপাদানে ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট করুন:

উদাহরণ

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

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

যদি ব্যাকগ্রাউন্ড ইমেজ উপাদানটির থেকে ছোট হয়, তাহলে ইমেজটি স্বয়ংক্রিয়ভাবে অনুভূমিকভাবে এবং উল্লম্বভাবে পুনরাবৃত্তি করবে যতক্ষণ না এটি উপাদানের শেষ পর্যন্ত পৌঁছায়:

উদাহরণ

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

ব্যাকগ্রাউন্ড ইমেজ রিপিট হওয়া থেকে রোধ করতে, ব্যাকগ্রাউন্ড-রিপিট অ্যাট্রিবিউটকে নো-রিপিট এ সেট করুন:

উদাহরণ

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
Background Repeat Example

ব্যাকগ্রাউন্ড ইমেজ জুড়ে ছড়িয়ে

আপনি যদি ব্যাকগ্রাউন্ড ইমেজ সম্পূর্ণ উপাদান কভার করতে চান, আপনি কভার করতে ব্যাকগ্রাউন্ড-আকার সম্পত্তি সেট করতে পারেন।

এছাড়াও, সম্পূর্ণ উপাদানটি সর্বদা আচ্ছাদিত হয় তা নিশ্চিত করতে ব্যাকগ্রাউন্ড-সংযুক্তি বৈশিষ্ট্যটিকে ফিক্সড এ সেট করুন:

উদাহরণ

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

ব্যাকগ্রাউন্ড ইমেজ স্ট্রেচিং

আপনি যদি ব্যাকগ্রাউন্ড ইমেজটিকে পুরো উপাদানের সাথে মানানসই করতে চান, তাহলে আপনি ব্যাকগ্রাউন্ড-আকারের বৈশিষ্ট্য 100% 100% সেট করতে পারেন:

উদাহরণ

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

অনুশীলন করুন

❓ব্যাকগ্রাউন্ড ইমেজ সংজ্ঞায়িত করার জন্য সঠিক CSS সম্পত্তি কি?

bg বৈশিষ্ট্য
✗ ভুল!
চিত্র বৈশিষ্ট্য
✗ ভুল!
ব্যাকগ্রাউন্ড-ইমেজ সম্পত্তি
✓ ঠিক আছে!

আরও সিএসএস জানুন

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

CSS ব্যাকগ্রাউন্ড বৈশিষ্ট্য সম্পর্কে আরও জানতে, আমাদের CSS ব্যাকগ্রাউন্ড টিউটোরিয়াল পড়ুন।