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

প্রায় সব গুলো HTML element এই ব্যকগ্রাউন্ড ইমেজ যোগ করা যায় ।

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

এইচটিএমএল এলিমেন্ট এ ব্যকগ্রাউন্ড ছবি যোগ করার জন্য style এট্রিবিউট ব্যবহার করা হয় এবং এর প্রপার্টি ব্যবহার করা হয় background-image

উদাহরন 

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

নিজে চেষ্টা করুন

style ট্যাগ ব্যবহার  করেও ব্যকগ্রাউন্ড ইমেজ যোগ করা যায় ।

উদাহরন 

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

নিজে চেষ্টা করুন

ব্যকগ্রাউন্ড ইমেজ ফাইল পাথ আগের মতোই অর্থাৎ ইমেজ  লোড করার মতোই ঠিক করে নিতে হয়, ভুল হলে ব্যকগ্রাউন্ড ইমেজ লোড হবেনা

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

আপনি চাইলে পুরো ওয়েব পেজটিতেই ব্যকগ্রাউন্ড ইমেজ  যোগ করতে পারেন । এবং সেক্ষেত্রে আপনাকে <body> এলিমেন্ট এ ব্যকগ্রাউন্ড ইমেজ যোগ করতে হবে ।

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

নিজে চেষ্টা কারুন

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

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

kivabe logo repeated as background image

উদাহরন

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

নিজে চেষ্টা কারুন

তবে সেটা নিয়ন্ত্রন করা সম্ভব background-repeat property ব্যবহার করে যার ভেলু হবে no-repeat

<style>
    body {
      background-image: url('/logo_round.png');
      background-repeat:no-repeat;
    }
</style>

নিজে চেষ্টা কারুন

Background Cover

background image repeat বন্ধ করলে ইমেজটি ছোট হলে এক কোনায় পড়ে থাকে এবং বড় হলে তো রিপিট হয়না আবার পুরো ছবিটা দেখা যায়না ।

কিন্তু ব্যাকগ্রাউন্ড ইমেজ টি সবসময় পুরো পেজ জুড়ে শুধু একবার দেবার জন্য আমরা background-size প্রপার্টির ভেলু cover ব্যবহার করতে পারি ।

উদাহরণ

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

নিজে চেষ্টা কারুন

এবং যদি অনেক কন্টেন্ট থাকে ওয়েব পেজে সেক্ষেত্রে background image টি স্থির রেখে শুধু কন্টেন্ট গুলো ওঠা নামা করাতে আমরা background-attachment প্রপার্টির ভেলু fixed ব্যবহার করতে পারি

উদাহরণ

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

নিজে চেষ্টা কারুন

উপরের আলোচনায় এটা বুঝেছেন যে css background property ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ কে অনেক ভাবেস সাজানো জায় ।

সিএসএস অধ্যায় এ আমরা ব্যকগ্রাউন্ড ইমেজ সম্পর্কে আরো বিস্তারিত।

কমেন্ট করুন

Your email address will not be published. Required fields are marked *