কিভাবে একটি ওয়েবসাইট প্রতিক্রিয়াশীল ব্যাকগ্রাউন্ড ইমেজ যোগ করুন

সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল ডিজাইন ইমেজগুলি কিভাবে যোগ করবেন এখানে

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

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

বস্তুত, এই "তরল চিত্রগুলি" প্রতিক্রিয়াশীল ওয়েবসাইটের মূল টুকরাগুলির মধ্যে একটি (একটি তরল গ্রিড এবং মিডিয়া প্রশ্নগুলির সাথে)। এই তিনটি টুকরো শুরু থেকেই প্রতিক্রিয়াশীল ওয়েব ডিজাইনের একটি প্রধানতম উপাদান হয়ে দাঁড়িয়েছে, কিন্তু যখন এটি একটি সাইটের জন্য প্রতিক্রিয়াশীল ইনলাইন ইমেজগুলি (ইনলাইন ইমেজগুলি হল যে এইচটিএমএল মার্কআপের অংশ হিসাবে কোডেড থাকে) থেকে মোটামুটি সহজেই সহজেই থাকে। একই সঙ্গে ব্যাকগ্রাউন্ড ইমেজগুলি (যা CSS ব্যাকগ্রাউন্ড প্রোপার্টিজ ব্যবহার করে পৃষ্ঠায় রুপান্তরিত হয়) এর সাথে অনেক ওয়েব ডিজাইনার এবং ফ্রন্ট এন্ড ডেভেলপারদের জন্য একটি দীর্ঘ চ্যালেঞ্জ প্রদান করেছে। সৌভাগ্যক্রমে, CSS এর "ব্যাকগ্রাউন্ড-আকার" সম্পত্তি যোগ করার ফলে এটি সম্ভব হয়েছে।

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

পটভূমি-আকার: আবরণ;

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

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

কিভাবে ব্যাকগ্রাউন্ড-সাইজ ব্যবহার করবেন: কভার;

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

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

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

আপনার ওয়েব হোস্টে আপনার ছবি আপলোড করুন এবং এটি আপনার ব্যাকগ্রাউন্ড ইমেজ হিসাবে CSS এ যুক্ত করুন:

ব্যাকগ্রাউন্ড-ইমেজ: ইউআরএল (ফায়ারওয়ার্কস-ওভার-ওয়ডব্লুএইচপি);
পটভূমি-পুনরাবৃত্তি: কোন-পুনরাবৃত্তি;
পটভূমি-অবস্থান: কেন্দ্র কেন্দ্র;
পটভূমি- সংযুক্তি: নির্দিষ্ট;

প্রথমে ব্রাউজার প্রিফিক্সেড CSS যুক্ত করুন:

- ওয়েবক্যাট-ব্যাকগ্রাউন্ড-আকার: কভার;
-মোজ-ব্যাকগ্রাউন্ড-আকার: কভার;
-অ-ব্যাকগ্রাউন্ড-আকার: কভার;

তারপর CSS বৈশিষ্ট্য যোগ করুন:

পটভূমি-আকার: আবরণ;

বিভিন্ন চিত্র ব্যবহার করে বিভিন্ন ডিভাইসগুলি ব্যবহার করে

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

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

আপনি যে ডিভাইসগুলির উপর প্রদর্শিত হবে তার জন্য যথাযথ চিত্রগুলি পরিবেশন করতে এবং আপনার মোবাইল ডিভাইসগুলির সাথে আপনার ওয়েবসাইটের সামঞ্জস্য আরও উন্নত করতে মিডিয়া প্রশ্নগুলি ব্যবহার করতে পারেন তা জানুন।

Jennfier Krynin দ্বারা মূল নিবন্ধ। Jeremy Girard দ্বারা সম্পাদিত 9/12/17