কিভাবে তৈরি করা হয়: সম্পূর্ণ পৃষ্ঠা ছবি
কিভাবে CSS ব্যবহার করে সম্পূর্ণ পৃষ্ঠা ব্যাকগ্রাউন্ড ছবি তৈরি করা হয়
সম্পূর্ণ পৃষ্ঠা ছবি
কিভাবে একটি সম্পূর্ণ ব্রাউজার উইন্ডোকে আবর্ণিত করা হয় বুঝতে শিখুন। নিম্নলিখিত উদাহরণটিতে, পূর্ণ (এবং অর্ধ) পৃষ্ঠা ব্যাকগ্রাউন্ড ছবির প্রতিক্রিয়াশীলতা দেখা যায়:
সম্পূর্ণ উচ্চতা ছবি কিভাবে তৈরি করা হয়
একটি কন্টেনার ইলিমেন্ট ব্যবহার করে এবং সেই কন্টেনারে 100% উচ্চতা ব্যাকগ্রাউন্ড ছবি যোগ করুন。
টীকা:50% ব্যবহার করে অর্ধেক পৃষ্ঠা ব্যাকগ্রাউন্ড ছবি তৈরি করতে পারেন। তারপর, বর্তমান ব্যাকগ্রাউন্ড প্রতিশব্দ ব্যবহার করে ছবিকে কেন্দ্রীভূত এবং সমানভাবে সমস্ত আকারে সমায়োজিত করা হবে:
মন্তব্য:ছবিটিকে সম্পূর্ণ স্ক্রোল পেজকে আবর্ণিত করতে নিশ্চিত করার জন্য, আপনাকে আরও height: 100% একইভাবে প্রয়োগ করা <html> এবং <body>:
সম্পূর্ণ পৃষ্ঠা ব্যাকগ্রাউন্ড ছবি:
body, html {
height: 100%;
}
.bg {
/* ব্যবহৃত ছবি */
background-image: url("dancer.jpg");
/* সম্পূর্ণ উচ্চতা */
height: 100%;
/* ভালোভাবে কেন্দ্রীভূত এবং ছবিকে সমানভাবে সমস্ত আকারে সমায়োজিত করা */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
半页背景图像：
.bg {
height: 50%;
}
