কন্টেন্ট
ব্যাকগ্রাউন্ড গ্রাফিক্সের সাথে আপনার ওয়েবসাইটকে চাক্ষুষ আগ্রহ দিন
দ্বারা পর্যালোচনা
এখন, সিএসএসে একবার দেখুন। এটি উপরের কোডের চেয়ে বেশি আলাদা নয়। এটি পরিষ্কার করার জন্য কয়েকটি সংযোজন রয়েছে।
এখন, এটি পূর্ণ পর্দার ফলাফল।
সেট করে পটভূমি আকার প্রতি আবরণ, আপনি গ্যারান্টি দিবেন যে ব্রাউজারগুলি এটি প্রয়োগ করা হচ্ছে এমন HTML উপাদানটির পুরো ক্ষেত্রটি toাকতে স্বয়ংক্রিয়ভাবে পটভূমির চিত্রটি বড় আকারের করবে। সংকীর্ণ উইন্ডোটি একবার দেখুন।
ক্যানিউজ ডটকমের মতে, এইটি নব্বই শতাংশেরও বেশি ব্রাউজার দ্বারা সমর্থিত, বেশিরভাগ পরিস্থিতিতে এটি একটি সুস্পষ্ট পছন্দ হিসাবে তৈরি করে। এটি মাইক্রোসফ্ট ব্রাউজারগুলির সাথে কিছু সমস্যা তৈরি করে, তাই ফলব্যাকের প্রয়োজন হতে পারে।
ফলব্যাক ওয়ে
এখানে একটি উদাহরণ যা পৃষ্ঠার মূল অংশের জন্য একটি পটভূমি চিত্র ব্যবহার করে এবং এতে আকার নির্ধারণ করে 100% যাতে এটি সর্বদা পর্দা ফিট করতে প্রসারিত হয়। এই পদ্ধতিটি নিখুঁত নয় এবং এটি কিছু অনাবৃত স্থানের কারণ হতে পারে তবে এটি ব্যবহার করে পটভূমি অবস্থানে রয়েছে এমন সম্পত্তি, আপনার সমস্যাটি দূর করতে সক্ষম হওয়া উচিত এবং এখনও পুরানো ব্রাউজারগুলিকে সামঞ্জস্য করা উচিত।
শরীর {
পটভূমি: url ('bgimage.webp');
পটভূমি পুনরাবৃত্তি: কোন পুনরাবৃত্তি;
পটভূমি-আকার: 100%;
পটভূমি অবস্থান: কেন্দ্র;
}
সাথে উপরের উদাহরণ ব্যবহার করে পটভূমি আকার সেট 100% পরিবর্তে, আপনি দেখতে পারেন যে সিএসএস বেশিরভাগই একই রকম।
একটি পূর্ণ-স্ক্রিন ব্রাউজারে বা চিত্রের সাথে একই মাত্রাযুক্ত ফলাফল প্রায় সমান। তবে সংকীর্ণ স্ক্রিনের সাথে ত্রুটিগুলি দেখাতে শুরু করে।
স্পষ্টতই, এটি আদর্শ নয়, তবে এটি ফ্যালব্যাক হিসাবে কাজ করবে।
ক্যানিউজ ডটকমের তথ্য অনুসারে, এই সম্পত্তি আইই 9+, ফায়ারফক্স 4+, অপেরা 10.5+, সাফারি 5+, ক্রোম 10.5+ এবং সমস্ত বড় মোবাইল ব্রাউজারগুলিতে কাজ করে। এটি আপনাকে আজ উপলভ্য সমস্ত আধুনিক ব্রাউজারগুলির জন্য কভার করে, যার অর্থ এই সম্পত্তিটি কারও স্ক্রিনে কাজ করবে না এমন ভয় ছাড়াই আপনার ব্যবহার করা উচিত।
এই দুটি পদ্ধতির মধ্যে আপনার প্রায় সকল ব্রাউজারকে সমর্থন করতে কোনও অসুবিধা হওয়া উচিত নয়। যেমন পটভূমি আকার: কভার ব্রাউজারগুলির মধ্যে আরও বেশি গ্রহণযোগ্যতা অর্জন, এমনকি এই ফলব্যাক অপ্রয়োজনীয় হয়ে উঠবে। স্পষ্টতই, CSS3 এবং আরও প্রতিক্রিয়াশীল নকশা অনুশীলনগুলি HTML উপাদানগুলির মধ্যে অভিযোজিত ব্যাকগ্রাউন্ড হিসাবে চিত্রগুলি ব্যবহার করে সরল ও প্রবাহিত করেছে।
