CSS background-image
background-image প্রপার্টি ব্যবহার করে এইচটিএমএল এলিমেন্টের পেছনে ব্যাকগ্রাউন্ড আকারে ছবি দেয়া যায়।
ডিফল্ট ভাবে, চিত্রটি পুনরাবৃত্তি হয় যাতে এটি সম্পূর্ণ উপাদানটি জুড়ে ছড়িয়ে পড়ে ।
ব্যাকগ্রাউন্ড ইমেজ পুরো ওয়েব পেজের জন্য সেট করা যায় আবার ছোট ছোট বক্সের জন্যও ।
উদাহরন ১
একটি পৃষ্ঠার জন্য পটভূমি চিত্র সেট করুন:
body {
background-image: url("background.png");
}উদাহরন ২
এই উদাহরণটি পাঠ্য(টেক্সট) এবং পটভূমির চিত্রের একটি খারাপ সমন্বয় দেখায়। খেয়ার করে দেখুন লিখাটি পড়তে কষ্ট হচ্ছে।
body {
background-image: url('/nature.jpg');
}উপরের url(‘background.png’) এর মাধ্যমে যে ইমেজ টি ব্যাকগ্রাউন্ড ছবি হিসেবে লোড হবে সেটি HTML file টি যে ফল্ডার এ আছে সেই ফোল্ডার এর ই ইমেজ ।
আর url(‘/nature.jpg’) ব্যবহার করা হয়েছে আমাদের নেয়া প্র্যাকটিস লিংক টিতে। একটু ভালো করে খেয়াল করলে দেখবেন Image File Name এর আগে একটি / সাইন আছে যেটি আসলে ওয়েবসাইট এর রুট ফোল্ডার থেকে ইমেজ টি লোড করবে ।
ব্যকগ্রাউন্ড ইমেজ ফাইল পাথ আগের মতোই অর্থাৎ ইমেজ লোড করার মতোই ঠিক করে নিতে হয়, ভুল হলে ব্যকগ্রাউন্ড ইমেজ লোড হবেনা
আমরা এইচটিএমএল ইমেজ এ দেখেছি ফাইল পাথ ঠিক করা কতটা জরুরী । যদি এখনও আপনার এ বিষয় এ সমস্যা থাকে, দেখে নিতে পারেন
যখন লেখার পেছনে ব্যাকগ্রাউন্ড ইমেজ যোগ করবেন, খেয়াল রাখবেন যেনো ইমেজের উপর লেখা ঠিক মতো পাড়া যায় এবং ফুটে ওঠে
সিএসএস ব্যাকগ্রাউন্ড ইমেজ যে কোন এলিমেন্টের জন্য ব্যবহার করা যায় । যেমন নিচের উদাহরনে আমরা <p> এলিমেন্টের জন্য সিএসএস ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করেছি ।
উদাহরন
p {
background-image: url('bgimg.png');
}