প্রায় সব গুলো 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>ব্যাকগ্রাউন্ড রিপিট
সাধারনত ওয়েব পেজে ব্যবহৃত ব্যকগ্রাউন্ড ছবি গুলো বার বার রিপিট হয় । যদি ব্যকগ্রাউন্ড ইমেজ টি আকারে ছোট হয়, তাহলে আরো বেশি রিপিট হয় । নিচের মতো
উদাহরন
<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 ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ কে অনেক ভাবেস সাজানো জায় ।
সিএসএস অধ্যায় এ আমরা ব্যকগ্রাউন্ড ইমেজ সম্পর্কে আরো বিস্তারিত।