একটি ওয়েব পেজ ফিট করার জন্য একটি ব্যাকগ্রাউন্ড ইমেজ প্রসারিত CSS3 ব্যবহার করুন

চিত্র আকর্ষণীয় ওয়েবসাইট ডিজাইন একটি গুরুত্বপূর্ণ অংশ। এই ব্যাকগ্রাউন্ড ইমেজ ব্যবহার রয়েছে। এই ব্যবহার করা হয় যে ইমেজ এবং গ্রাফিক্স হয় পিছনে সামগ্রী পৃষ্ঠাগুলির অংশ হিসাবে উপস্থাপিত চিত্রগুলির বিপরীতে একটি পৃষ্ঠার এলাকা। এই ব্যাকগ্রাউন্ড ইমেজগুলি একটি পৃষ্ঠায় চাক্ষুষ আগ্রহ যোগ করতে পারে এবং আপনি যে পৃষ্ঠাটির জন্য অনুসন্ধান করতে যাচ্ছেন সেই ভিজ্যুয়াল ডিজাইনটি অর্জন করতে সহায়তা করে।

আপনি যদি পটভূমির চিত্রগুলির সাথে কাজ শুরু করেন, তবে নিঃসন্দেহে আপনি এমন চিত্রটি চালাতে পারবেন যেখানে আপনি কোন চিত্রটি পৃষ্ঠার জন্য প্রসারিত করতে চান। এটি বিশেষভাবে প্রতিক্রিয়াশীল ওয়েবসাইটগুলির জন্য সত্য যা ডিভাইসগুলির বিস্তৃত এবং স্ক্রীন মাপে সরবরাহ করা হচ্ছে।

একটি ব্যাকগ্রাউন্ড ইমেজ প্রসারিত করার এই ইচ্ছা ওয়েব ডিজাইনারদের জন্য একটি খুব সাধারণ ইচ্ছা কারণ একটি ওয়েবসাইটের স্থানটিতে প্রতি চিত্রটি ফিট করে না। একটি নির্দিষ্ট আকার নির্ধারণ করার পরিবর্তে, চিত্রটি প্রসারিত করতে এটি ব্রাউজার উইন্ডোর কতটা প্রশস্ত বা সংকীর্ণ তা পৃষ্ঠাটিকে মাপসই করতে দেয়।

পৃষ্ঠার পটভূমিতে মাপসই করার জন্য একটি চিত্র প্রসারিত করার সেরা উপায় হল পটভূমি-আকারের জন্য CSS3 সম্পত্তিটি ব্যবহার করা। এখানে এমন একটি উদাহরণ যা একটি পৃষ্ঠার শরীরের জন্য একটি ব্যাকগ্রাউন্ড চিত্র ব্যবহার করে এবং এটি আকারকে 100% স্থির করে যাতে এটি সর্বদা পর্দাটি মাপসই করতে পারে।

শরীর { পটভূমি: url (bgimage.jpg) কোন পুনরাবৃত্তি; পটভূমি আকার: 100%; }

Caniuse.com এর মতে, এই সম্পত্তিটি IE 9+, ফায়ারফক্স 4+, অপেরা 10.5+, সাফারি 5+, ক্রোম 10.5+ এবং সমস্ত প্রধান মোবাইল ব্রাউজারগুলিতে কাজ করে। এটি আপনাকে আজ উপলব্ধ সমস্ত আধুনিক ব্রাউজারের জন্য আচ্ছাদিত করে, যার মানে আপনি এই সম্পত্তিটি কোনওরকম স্ক্রিনে কাজ করবে না এমন ভয় ছাড়াই ব্যবহার করতে হবে।

পুরোনো ব্রাউজারে একটি প্রসারিত ব্যাকগ্রাউন্ড ফেকিং

IE9 এর চেয়ে পুরোনো কোনও ব্রাউজারকে সমর্থন করা আপনার পক্ষে অসম্ভব, তবে আসুন আমরা অনুমান করি যে IE8 এই সম্পত্তিটিকে সমর্থন করে না। এই ক্ষেত্রে, আপনি একটি প্রসারিত ব্যাকগ্রাউন্ড জাল পারেন। এবং আপনি Firefox 3.6 এর জন্য ব্রাউজারের উপসর্গগুলি ব্যবহার করতে পারেন (-moz-পটভূমি-মাপ) এবং অপেরা 10.0 (-o-পটভূমি-মাপ).

একটি প্রসারিত পটভূমি ইমেজ জাল সহজতম উপায় পুরো পাতা জুড়ে প্রসারিত হয়। তারপরে আপনি অতিরিক্ত স্থান দিয়ে শেষ না হন বা আপনার পাঠ্যটি প্রসারিত অঞ্চলে ফিট হয় সে বিষয়ে চিন্তা করতে হবে। এখানে কিভাবে এটি করতে হবে:

আইডি = "বিজি" />

1. প্রথম, সব ব্রাউজারে 100% উচ্চতা, 0 মার্জিন এবং 0 প্যাডিং নিশ্চিত করুনএইচটিএমএল শরীর উপাদান। আপনার এইচটিএমএল ডকুমেন্টের প্রধানটিতে নিম্নলিখিতটি রাখুন:
2. ওয়েব পৃষ্ঠাটির প্রথম উপাদান হিসাবে আপনি পটভূমি হতে চান এমন চিত্র যুক্ত করুন এবং এটি দিন আইডি "বিজি" এর:
3. পটভূমির চিত্রটি স্থির করুন যাতে এটি উপরের এবং বামে স্থির থাকে এবং 100% প্রশস্ত এবং 100% উচ্চতা। আপনার স্টাইল শীট এই যোগ করুন:
   1. IMG # বিজি {
   3. অবস্থান: নির্দিষ্ট;
   5. শীর্ষ: 0;
   7. বাম: 0;
   9. প্রস্থ: 100%;
   11. উচ্চতা: 100%;
   13. }
4. একটি পৃষ্ঠার মধ্যে আপনার সমস্ত কন্টেন্ট যোগ করুন DIV একটি সঙ্গে উপাদান আইডি "কন্টেন্ট" এর। যুক্ত করুন DIV ছবির নিচেএখানে আপনার সমস্ত সামগ্রী - শিরোনাম, অনুচ্ছেদ, ইত্যাদি সহ
   1. দ্রষ্টব্য: এখন আপনার পৃষ্ঠাটি দেখতে আকর্ষণীয়। ছবি প্রসারিত করা উচিত, কিন্তু আপনার বিষয়বস্তু সম্পূর্ণ অনুপস্থিত। কেন? কারণ ব্যাকগ্রাউন্ড চিত্রটি 100% উচ্চতা এবং সামগ্রী বিভাগটি হয় পরে নথির প্রবাহে চিত্র - বেশিরভাগ ব্রাউজার এটি প্রদর্শন করবে না।
5. আপনার বিষয়বস্তু অবস্থান করুন যাতে এটি আপেক্ষিক এবং একটি আছে Z-সূচক এর 1. এটি মান-সম্মতিপূর্ণ ব্রাউজারে ব্যাকগ্রাউন্ড চিত্রের উপরে এটি আনবে। আপনার স্টাইল শীট এই যোগ করুন:
   1. # উপাদান {
   3. অবস্থান: আপেক্ষিক;
   5. z- সূচক: 1;
   7. }
6. কিন্তু আপনি সম্পন্ন করা হয় না। ইন্টারনেট এক্সপ্লোরার 6 মান সম্মতিশীল এবং এখনও কিছু সমস্যা আছে। প্রতিটি ব্রাউজার থেকে CSS লুকাতে অনেকগুলি উপায় রয়েছে তবে IE6, তবে সহজতম (এবং অন্যান্য সমস্যার কারণ হতে পারে) শর্তাধীন মন্তব্যগুলি ব্যবহার করা। আপনার নথির শিরোনামে আপনার স্টাইলশীট পরে নিম্নলিখিতটি রাখুন:
7. হাইলাইট মন্তব্যের ভিতরে, IE 6টি সুন্দর খেলার জন্য কিছু শৈলী সহ অন্য স্টাইল শীট যোগ করুন:
8. IE 7 এবং IE 8 তেও পরীক্ষা করতে ভুলবেন না। আপনি তাদের সমর্থন করার জন্য মন্তব্য সামঞ্জস্য করতে হবে। যাইহোক, আমি এটি পরীক্ষা যখন এটি কাজ।

ঠিক আছে - এই স্বীকারোক্তি ওয়ে overkill হয়। খুব কম সাইটের IE 7 বা 8 সমর্থন করা দরকার, অনেক কম IE6! যেমন, এই পদ্ধতিটি আপনার জন্য প্রাচীন এবং সম্ভবত অপ্রয়োজনীয়। আমি আরো কৌতুহলী মডেল হিসাবে আরো এখানে রেখেছি যে আমাদের ব্রাউজারগুলি এত সুন্দরভাবে একসঙ্গে অভিনয় করার আগে কত বেশি কঠিন জিনিস ছিল!

একটি ছোট স্থান উপর একটি প্রসারিত ব্যাকগ্রাউন্ড ইমেজ ফেকিং

আপনি জুড়ে একটি প্রসারিত ব্যাকগ্রাউন্ড ইমেজ জাল অনুরূপ কৌশল ব্যবহার করতে পারেন DIV অথবা আপনার ওয়েব পৃষ্ঠায় অন্য উপাদান। এটি একটি বিট trickier হিসাবে আপনি সম্পূর্ণ পজিশনিং ব্যবহার বা আপনার পৃষ্ঠার অন্যান্য অংশে অদ্ভুত স্থানান্তরের সমস্যা আছে।

1. পৃষ্ঠায় ছবিটি রাখুন যা আমি পটভূমি হিসাবে ব্যবহার করতে চাই।
2. স্টাইল শীট ইন, ইমেজ জন্য একটি প্রস্থ এবং উচ্চতা সেট করুন। দ্রষ্টব্য, আপনি প্রস্থ বা উচ্চতা জন্য শতাংশ ব্যবহার করতে পারেন, কিন্তু আমি উচ্চতা জন্য দৈর্ঘ্য মান সঙ্গে সামঞ্জস্য করা সহজ।
   1. IMG # বিজি {
   3. প্রস্থ: 20em;
   5. উচ্চতা: 30em;
   7. }
3. সঙ্গে একটি div আপনার বিষয়বস্তু রাখুন আইডি "কন্টেন্ট" আমরা উপরে কি হিসাবে:এখানে আপনার সব কন্টেন্ট
4. ব্যাকগ্রাউন্ড ইমেজ হিসাবে বিষয়বস্তু DIV একই প্রস্থ এবং উচ্চতা হতে শৈলী:
   1. div # বিষয়বস্তু {
   3. প্রস্থ: 20em;
   5. উচ্চতা: 30em;
   7. }
5. তারপর ইমেজ হিসাবে একই উচ্চতা পর্যন্ত কন্টেন্ট অবস্থান।তাই যদি আপনার ছবি 30em হয় আপনি শীর্ষ একটি শৈলী হবে: -30em; কন্টেন্ট উপর একটি z- সূচক রাখতে ভুলবেন না।
   1. # উপাদান {
   3. অবস্থান: আপেক্ষিক;
   5. শীর্ষ: -30em;
   7. z- সূচক: 1;
   9. প্রস্থ: 20em;
   11. উচ্চতা: 30em;
   13. }
6. তারপর IE 6 ব্যবহারকারীর জন্য একটি Z-index-1 যুক্ত করুন, যেমনটি আপনি উপরে করেছেন:

আবার, ব্যাকগ্রাউন্ড আকারটি এখন ব্রড ব্রাউজারের সমর্থনটি উপভোগ করছে, এটি এই পদ্ধতির অপ্রয়োজনীয় এবং এটি একটি পূর্ব যুগের একটি পণ্য হিসাবে উপস্থাপিত। আপনি যদি এই পদ্ধতিটি ব্যবহার করতে চান, তবে আপনি যত তাড়াতাড়ি ব্রাউজারে এটি পরীক্ষা করতে পারেন তা নিশ্চিত করুন। এবং যদি আপনার সামগ্রী আকার পরিবর্তন করে তবে আপনাকে আপনার ধারক এবং পটভূমি চিত্রের আকার পরিবর্তন করতে হবে, অন্যথায়, আপনি অদ্ভুত ফলাফলগুলি শেষ করবেন।