বিশ্বের সবচেয়ে বড় বাংলা ওয়েব ডেভেলোপার সাইট
HTML-এর যেকোনো এলিমেন্টে ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যায়।
HTML এলিমেন্টে ব্যাকগ্রাউন্ড ইমেজ যোগ করতে, HTML style অ্যাট্রিবিউট এবং CSS Background-image প্রোপার্টি ব্যবহার করুন:
<style> ট্যাগে CSS ব্যবহার করেআপনি চাইলে CSS কোডটি <style> ট্যাগে লিখে HTML ডকুমেন্টের head অংশে রাখতে পারেন
যদি আপনি পুরো পৃষ্ঠাটিতে একটি ব্যাকগ্রাউন্ড ইমেজ চান, তাহলে আপনাকে
এলিমেন্টে ব্যাকগ্রাউন্ড ইমেজটি বসাতে হবে।পুরো পৃষ্ঠার জন্য একটি ব্যাকগ্রাউন্ড ইমেজ যুক্ত করুন:
যদি ইমেজটি ছোট হয়, তাহলে সেটি স্বয়ংক্রিয়ভাবে বারবার (horizontal ও vertical) রিপিট হবে।
ব্যাকগ্রাউন্ড ইমেজ যাতে পুনরাবৃত্তি(repeat) না হয় তার জন্য, background-repeat প্রোপার্টিটিকে no-repeat এ সেট করুন।
যদি আপনি চান যে ব্যাকগ্রাউন্ড ইমেজটি পুরো এলিমেন্টটি ঢেকে রাখুক, তাহলে আপনি background-size:cover; সেট করতে পারেন।
এছাড়াও background-attachment: fixed; দিলে ইমেজ স্ক্রল করলেও একই জায়গায় থাকবে।
এইভাবে, ব্যাকগ্রাউন্ড ইমেজটি সম্পূর্ণ এলিমেন্টটি ঢেকে রাখবে, কোনও প্রসারিত ছাড়াই (ছবিটি তার আসল অনুপাত বজায় রাখবে)
ইমেজ যদি পুরো এলিমেন্টে স্ট্রেচ করে ফিট করাতে চান, তাহলে background-size: 100% 100%; ব্যবহার করতে পারেন।