সিএসএস ব্যবহার করে ব্রাউজার উইন্ডোটির পুরো প্রস্থে ব্যাকগ্রাউন্ড চিত্রটি প্রসারিত করার দক্ষতা কেবলমাত্র তার সর্বশেষতম বিবরণ - সিএসএস 3 প্রকাশের সাথে উপস্থিত হয়েছিল appeared দুর্ভাগ্যক্রমে, এখনও অবধি প্রচুর ওয়েব সার্ফার প্রারম্ভিক ব্রাউজারগুলি ব্যবহার করছে যা CSS3 নির্দিষ্টকরণ বোঝে না। অতএব, আপনাকে পছন্দ করতে হবে - হয় কম সুবিধাজনক, তবে ক্রস ব্রাউজার সমাধান, বা একটি উচ্চ প্রযুক্তি ব্যবহার করুন, তবে সীমিত দর্শকের জন্য। আসুন দুটি বিকল্প বিবেচনা করা যাক।
প্রয়োজনীয়
এইচটিএমএল এবং সিএসএসের প্রাথমিক জ্ঞান
নির্দেশনা
ধাপ 1
প্রথম বিকল্পটি সিএসএস ভাষার পূর্ববর্তী বৈশিষ্ট্যের উপর ভিত্তি করে। আপনাকে এমন একটি এইচটিএমএল কোড কাঠামো তৈরি করতে হবে যাতে দুটি ওভারল্যাপিং স্তর থাকে, একে অপরের উপরে। পুরাতন ক্যাসকেডিং শৈলীর বর্ণন ভাষার স্পেসিফিকেশনে স্তরগুলি (ডিভ) পর্দার প্রস্থে প্রসারিত করা যেতে পারে। স্তরগুলির নীচে আপনার পটভূমির চিত্র স্থাপন করা দরকার এবং উপরের অংশে পৃষ্ঠার সমস্ত বিষয়বস্তু স্থাপন করা হবে। নথির শরীরে এ জাতীয় কাঠামো এর মতো দেখতে পাওয়া যেতে পারে:
এটি পৃষ্ঠার বিষয়বস্তু হবে
এবং এই কাঠামোর জন্য শৈলীর বিবরণ শিরোনাম অংশে রাখা উচিত। উদাহরণস্বরূপ, এটি:
এইচটিএমএল, শরীর {
মার্জিন: 0 পিএক্স;
উচ্চতা: 100%;
}
# ব্যাকগ্রাউন্ড {
অবস্থান: পরম;
প্রস্থ: 100%;
উচ্চতা: 100%;
}
# কেউ {
অবস্থান: পরম;
প্রস্থ: 100%;
উচ্চতা: 100%;
জেড-ইনডেক্স: 2;
}
এখানে আইডি ব্যাকগ্রাউন্ড (এটি আপনার পটভূমির চিত্র) এবং বডি (পৃষ্ঠার সামগ্রীর জন্য এটি স্তর) সহ স্তরগুলি পরম অবস্থান এবং 100% প্রস্থ এবং উচ্চতায় সেট করা আছে। তদ্ব্যতীত, সামগ্রী স্তরটি ক্রমিক সংখ্যা z-index = 2 বরাদ্দ করা হয় এটি স্তরগুলির "গভীরতা" নির্ধারণ করে - এটি বৃহত্তর হয়, "নীচে" থেকে আরও এই স্তরটি অবস্থিত। আমাদের ক্ষেত্রে এটি ব্যাকগ্রাউন্ড স্তরের উপরে থাকবে, যা ডিফল্ট জেড-ইনডেক্স ব্যবহার করে।
ধাপ ২
সম্পূর্ণ কোডটি দেখতে এরকম হতে পারে:
এইচটিএমএল, শরীর {
মার্জিন: 0 পিএক্স;
উচ্চতা: 100%;
}
# ব্যাকগ্রাউন্ড {
অবস্থান: পরম;
প্রস্থ: 100%;
উচ্চতা: 100%;
}
# কেউ {
অবস্থান: পরম;
প্রস্থ: 100%;
উচ্চতা: 100%;
জেড-সূচক: 2;
}
এটি পৃষ্ঠার বিষয়বস্তু হবে
পটভূমির চিত্র ফাইলের নাম fon.
ধাপ 3
দ্বিতীয় বিকল্পটি CSS3 এ প্রবর্তিত ব্যাকগ্রাউন্ড-আকারের সম্পত্তি ব্যবহার করবে। একই সময়ে, শৈলীর সংজ্ঞাগুলিতে অনুরূপ বৈশিষ্ট্য যুক্ত করুন যা ব্রাউজার মোজিলা ফায়ারফক্স, গুগল ক্রোম এবং অপেরা দ্বারা ব্যবহৃত হয়েছিল। এই সংস্করণে শৈলীর বিবরণ ব্লকটি এর মতো দেখতে পারে:
এইচটিএমএল {
পটভূমি: url (fon.png) নো-রিপিট সেন্টার সেন্টার স্থির;
-উইবকিট-ব্যাকগ্রাউন্ড-আকার: কভার;
-মুজ-পটভূমি-আকার: কভার;
-ও-পটভূমি-আকার: কভার;
পটভূমি-আকার: কভার;
}
এবং এখানে পটভূমি চিত্র ফাইলের নাম fon.png"
