একটি ওয়েব পৃষ্ঠা ফিট করার জন্য একটি ব্যাকগ্রাউন্ড চিত্র প্রসারিত কিভাবে

ব্যাকগ্রাউন্ড গ্রাফিক্স সহ আপনার ওয়েবসাইট ভিজ্যুয়াল আগ্রহ দিন

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

আপনি যদি ব্যাকগ্রাউন্ড ইমেজগুলির সাথে কাজ শুরু করেন, তাহলে নিঃসন্দেহে আপনি এমন দৃশ্যের মধ্যে চলে যাবেন যেখানে আপনি ছবিটি মাপতে ছবিটি প্রসারিত করতে চান।

এটি এমন একটি প্রতিক্রিয়াশীল ওয়েবসাইটগুলির জন্য বিশেষভাবে সত্য, যা ব্যাপকভাবে ডিভাইস এবং স্ক্রিন মাপে বিতরণ করা হচ্ছে ।

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

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

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

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

পুরোনো ব্রাউজারে একটি পটভূমির পটভূমি ফিক্সিং

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

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

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

1. প্রথমত, নিশ্চিত করুন যে সমস্ত ব্রাউজারে 100% উচ্চতা, 0 মার্জিন এবং 0 এবং HTML বিডি উপাদানে প্যাডিং আছে। আপনার HTML নথির প্রধানের মধ্যে নিম্নলিখিতটি স্থাপন করুন:

2. ওয়েব পৃষ্ঠার প্রথম উপাদান হিসাবে আপনি পটভূমি হতে চান এমন ছবিটি যোগ করুন এবং এটি "বিজি" এর আইডি দিন :

3. পটভূমির ছবিটি স্থির করুন যাতে এটি উপরে এবং বামে নির্ধারিত হয় এবং 100% প্রশস্ত এবং 100% উচ্চতা। আপনার স্টাইল শীট এ যোগ করুন:

   img # বিজি {
   অবস্থান: স্থির;
   শীর্ষ: 0;
   বামে: 0;
   প্রস্থ: 100%;
   উচ্চতা: 100%;
   }

4. "কন্টেন্ট" একটি আইডি সঙ্গে একটি DIV উপাদান ভিতরে পৃষ্ঠায় আপনার সমস্ত বিষয়বস্তু যোগ করুন ইমেজ নীচের DIV যুক্ত করুন:

   আপনার সমস্ত সামগ্রী এখানে - সহ শিরোনাম, অনুচ্ছেদ, ইত্যাদি।

   দ্রষ্টব্য: এখন আপনার পৃষ্ঠাটি দেখতে আকর্ষণীয়। ইমেজ প্রসারিত করা উচিত, কিন্তু আপনার সামগ্রী সম্পূর্ণরূপে অনুপস্থিত। কেন? যেহেতু ব্যাকগ্রাউন্ড ইমেজটি উচ্চতা 100%, এবং ডকুমেন্টের প্রবাহে চিত্রের পরে বিষয়বস্তু বিভাগ হয় - অধিকাংশ ব্রাউজারই এটি প্রদর্শন করবে না।
   
5. আপনার সামগ্রীটি স্থির করুন যাতে এটি আপেক্ষিক এবং 1 -এর z- সূচক থাকে। এটি এটি ব্যাকগ্রাউন্ড ইমেজের উপরে মান-সমরূপ ব্রাউজারগুলিতে আনতে হবে। আপনার স্টাইল শীট এ যোগ করুন:

   #content {
   অবস্থান: আপেক্ষিক
   z- সূচক: 1;
   }

1. কিন্তু আপনি কাজ করছেন না। ইন্টারনেট এক্সপ্লোরার 6 মান সম্মত নয় এবং এখনও কিছু সমস্যা আছে। প্রতিটি ব্রাউজার থেকে CSS ছড়ানোর অনেক উপায় আছে কিন্তু IE6, তবে সহজে (এবং অন্য সমস্যাগুলি অন্যরকম হওয়ার সম্ভাবনা কম) শর্তাধীন মন্তব্যগুলি ব্যবহার করতে হয় আপনার ডকুমেন্টের মাথায় আপনার স্টাইলশীট পর নিম্নলিখিতগুলি রাখুন:

2. হাইলাইট করা মন্তব্যের ভিতর, কিছু শৈলীর সাথে আরেকটি স্টাইল শীট যোগ করুন যাতে IE 6 ভাল খেলা যায়:

3. IE 7 এবং IE 8 তেও পরীক্ষা করতে ভুলবেন না আপনি তাদের পাশাপাশি তাদের সমর্থন মন্তব্য সমন্বয় প্রয়োজন হতে পারে। যাইহোক, আমি এটি পরীক্ষা যখন এটি কাজ।

ঠিক আছে - এই স্বীকারোক্তি WAY ওভারকিল খুব সামান্য সাইট IE 7 বা 8 সমর্থন প্রয়োজন, অনেক কম IE6!

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

একটি ছোট স্পেস উপর একটি আঁচানো পটভূমি ইমেজ জালিয়াতি

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

1. পৃষ্ঠায় যে ছবিটি আমি ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করতে চাই তা রাখুন।

2. শৈলী শীটে ছবির জন্য একটি প্রস্থ এবং উচ্চতা নির্ধারণ করুন। উল্লেখ্য, আপনি প্রস্থ বা উচ্চতা জন্য শতাংশ ব্যবহার করতে পারেন, কিন্তু আমি উচ্চতা জন্য দৈর্ঘ্যের মান সঙ্গে সামঞ্জস্য সহজ খুঁজে পেতে

   img # বিজি {
   প্রস্থ: 20م;
   উচ্চতা: 30 ইঞ্চি;
   }

3. আমরা উপরে কি হিসাবে আইডি "বিষয়বস্তু" একটি div সঙ্গে আপনার বিষয়বস্তু রাখুন:

   আপনার সমস্ত বিষয়বস্তু এখানে

4. ব্যাকগ্রাউন্ড ইমেজ হিসাবে বিষয়বস্তু ডিভি একই প্রস্থ এবং উচ্চতা হতে শৈলী করুন:

   div # content {
   প্রস্থ: 20م;
   উচ্চতা: 30 ইঞ্চি;
   }

5. তারপর ইমেজ হিসাবে একই উচ্চতা পর্যন্ত কন্টেন্ট অবস্থান। তাই আপনার ছবি যদি 30EM আপনি শীর্ষ একটি শৈলী হবে: -30em; বিষয়বস্তুতে 1- এর একটি z- সূচক রাখতে ভুলবেন না।

   #content {
   অবস্থান: আপেক্ষিক
   শীর্ষ: -30em;
   z- সূচক: 1;
   প্রস্থ: 20م;
   উচ্চতা: 30 ইঞ্চি;
   }

6. তারপর IE 6 ব্যবহারকারীদের জন্য -1 এর Z- সূচক যোগ করুন, যেমন আপনি উপরে করেছেন:

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

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