আজকের জনপ্রিয় ওয়েবসাইটগুলি দেখুন এবং আপনি যা দেখতে নিশ্চিত তা ডিজাইনের চিকিত্সাটি বড়, স্ক্রীন-স্প্যানিং পটভূমি চিত্র। এই চিত্রগুলি যুক্ত করার চ্যালেঞ্জগুলির মধ্যে একটি হল সর্বোত্তম অনুশীলন থেকে যা ওয়েবসাইটগুলি বিভিন্ন স্ক্রীন মাপ এবং ডিভাইসগুলিতে প্রতিক্রিয়া জানাতে হবে - একটি প্রতিক্রিয়া যা প্রতিক্রিয়াশীল ওয়েব ডিজাইন হিসাবে পরিচিত।
যেহেতু আপনার ওয়েবসাইটের বিন্যাসটি বিভিন্ন স্ক্রিন মাপের সাথে পরিবর্তিত এবং স্কেল হিসাবে, তাই এই ব্যাকগ্রাউন্ড চিত্রগুলি সেই অনুযায়ী তাদের আকার স্কেল করতে হবে। আসলে, এই "তরল ইমেজ" প্রতিক্রিয়াশীল ওয়েবসাইটের মূল অংশগুলির মধ্যে একটি (তরল গ্রিড এবং মিডিয়া প্রশ্নের সাথে)। যে তিনটি টুকরা শুরু থেকেই প্রতিক্রিয়াশীল ওয়েব ডিজাইনের প্রধানতম হয়েছে, তবে এটি কোনও সাইটে প্রতিক্রিয়াশীল ইনলাইন চিত্রগুলি যুক্ত করার পক্ষে মোটামুটি সহজ হয়েছে (ইনলাইন চিত্রগুলি হল HTML মার্কআপের অংশ হিসাবে কোডযুক্ত করা গ্রাফিক্স) ব্যাকগ্রাউন্ড ইমেজগুলির সাথে (যা CSS পটভূমি বৈশিষ্ট্য ব্যবহার করে পৃষ্ঠাটিতে স্টাইলযুক্ত) অনেক ওয়েব ডিজাইনার এবং ফ্রন্ট শেষ ডেভেলপারদের কাছে উল্লেখযোগ্য চ্যালেঞ্জ সরবরাহ করেছে। সৌভাগ্যক্রমে, সিএসএসের "ব্যাকগ্রাউন্ড-সাইজ" সম্পত্তির যোগসূত্রটি এটিকে সম্ভব করেছে।
একটি পৃথক নিবন্ধে, আমি কিভাবে CSS3 সম্পত্তি ব্যবহার করতে পারি পটভূমি আকার একটি উইন্ডোতে মাপসই করা ইমেজ প্রসারিত, কিন্তু এই সম্পত্তি জন্য স্থাপন করার জন্য একটি আরও ভাল, আরো দরকারী উপায় আছে। এটি করার জন্য, আমরা নিম্নলিখিত সম্পত্তি এবং মান সমন্বয় ব্যবহার করব:
পটভূমি আকার: কভার;
দ্য আবরণ কীভাবে উইন্ডোটি বড় বা ছোট হয় তা নির্বিশেষে, কীওয়ার্ড সম্পত্তি উইন্ডোটিকে মাপসই করার জন্য চিত্রটিকে স্কেল করতে বলে। চিত্রটির পুরো স্ক্রীনকে ঢেকে রাখার জন্য স্কেল করা হয়, তবে মূল অনুপাত এবং দৃষ্টিপাত অনুপাতটি অক্ষত রাখা হয়, চিত্রটিকে বিকৃত হতে বাধা দেয়। ছবিটি যতটা সম্ভব বড় আকারের উইন্ডোতে রাখা হয়েছে যাতে সমগ্র উইন্ডো পৃষ্ঠটি আচ্ছাদিত হয়। এর অর্থ হল আপনার পৃষ্ঠায় কোনও ফাঁকা জায়গা বা চিত্রের কোনও বিকৃতি নেই, তবে এটির অর্থ হচ্ছে পর্দার দৃষ্টি অনুপাত এবং প্রশ্নে থাকা চিত্রটির উপর নির্ভর করে কিছু ছবি ছাঁটাই করা যেতে পারে। উদাহরণস্বরূপ, কোনও চিত্রের প্রান্তগুলি (উপরের, নীচের, বাম, বা ডান) চিত্রগুলির উপর কাটা যেতে পারে, যা আপনি পটভূমি-অবস্থানের সম্পত্তিটির জন্য কোন মানগুলি ব্যবহার করেন তার উপর নির্ভর করে। যদি আপনি পটভূমিটিকে "বাম বামে" ঊর্ধ্বমুখী করেন, তবে চিত্রটির যেকোনো অতিরিক্তটি নীচের এবং ডান দিক থেকে বন্ধ হবে। আপনি যদি পটভূমির চিত্রটিকে কেন্দ্র করেন তবে অতিরিক্ত পরিমাণগুলি সমস্ত দিক থেকে বন্ধ হবে, কিন্তু যেহেতু অতিরিক্ত পরিমাণে ছড়িয়ে পড়েছে, যেহেতু যেকোন একটি দিকের প্রভাব কম পরিবেশন করা হবে।
ব্যবহারবিধি পটভূমি আকার: কভার;
আপনার পটভূমি চিত্র তৈরি করার সময়, একটি চিত্র তৈরি করা ভাল ধারণা যা মোটামুটি বড়। যখন ব্রাউজারটি ভিজ্যুয়াল গুণমানের উপর একটি উল্লেখযোগ্য প্রভাব ছাড়াই একটি চিত্রকে ছোট করে তুলতে পারে, যখন একটি ব্রাউজার তার মূল মাত্রার চেয়ে বড় আকারের একটি চিত্রকে স্কেল করে তবে দৃশ্যমান গুণমান হ্রাস পাবে, পঙ্কিল হয়ে ওঠে এবং পিক্সেলেট হয়ে যাবে। এর বিপরীতটি হল যে আপনি যখন সমস্ত স্ক্রীনে দৈত্য চিত্রগুলি সরবরাহ করছেন তখন আপনার পৃষ্ঠাটি একটি কর্মক্ষমতা আঘাত নেয়। যখন আপনি এটি করেন, তখন ডাউনলোডের গতি এবং ওয়েব বিতরণের জন্য যথোপযুক্ত সৃষ্টিকর্তাগুলি প্রস্তুত করুন। শেষ পর্যন্ত, আপনাকে একটি বড় পর্যাপ্ত চিত্রের আকার এবং গুণমান এবং ডাউনলোডের গতির জন্য যুক্তিসঙ্গত ফাইলের আকারের মধ্যে সুখী মাধ্যম খুঁজে পেতে হবে।
স্কেলিং ব্যাকগ্রাউন্ড ইমেজগুলি ব্যবহার করার সাধারণ উপায়গুলির মধ্যে একটি হল যখন আপনি একটি চিত্রের পূর্ণ ব্যাকগ্রাউন্ডটি নিতে চান, এটি পৃষ্ঠাটি প্রশস্ত এবং ডেস্কটপ কম্পিউটারে বা অনেক ছোট ছোট এবং একটি হ্যান্ডহেল্ডে পাঠানো হচ্ছে, মোবাইল ডিভাইস।
আপনার ওয়েব হোস্টে আপনার ছবি আপলোড করুন এবং এটি আপনার CSS এ ব্যাকগ্রাউন্ড চিত্র হিসাবে যুক্ত করুন:
পটভূমি-চিত্র: ইউআরএল (আগ্নেয়াস্ত্র-ওভার-wdw.jpg);ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: কোন পুনরাবৃত্তি;পটভূমি অবস্থান: কেন্দ্র কেন্দ্র;ব্যাকগ্রাউন্ড-সংযুক্তি: সংশোধন করা হয়েছে;
ব্রাউজার prefixed সিএসএস প্রথমে যোগ করুন:
-webkit- পটভূমি আকার: কভার;-মুজ-পটভূমি-আকার: কভার;-ও-পটভূমি আকার: কভার;
তারপর সিএসএস সম্পত্তি যোগ করুন:
পটভূমি আকার: কভার;
Suit ঘূর্ণায়মান ডিভাইস যে বিভিন্ন ইমেজ ব্যবহার করে
ডেস্কটপ বা ল্যাপটপ অভিজ্ঞতার জন্য প্রতিক্রিয়াশীল নকশা গুরুত্বপূর্ণ হলেও ওয়েবে অ্যাক্সেস করতে পারে এমন বিভিন্ন ডিভাইস উল্লেখযোগ্যভাবে বৃদ্ধি পেয়েছে এবং এতে স্ক্রীন মাপের আরও অনেক ধরণের আকার রয়েছে।
পূর্বে উল্লেখ করা হয়েছে, উদাহরণস্বরূপ, একটি স্মার্টফোনে একটি খুব বড় প্রতিক্রিয়াশীল ব্যাকগ্রাউন্ড চিত্র লোড করা, একটি কার্যকর বা ব্যান্ডউইথ-সচেতন নকশা নয়।
আপনি যে ডিভাইসগুলি প্রদর্শিত হবে তার জন্য যথাযথ চিত্রগুলি পরিবেশন করার জন্য মিডিয়া ক্যোয়ারীগুলি কীভাবে ব্যবহার করতে পারেন তা শিখুন এবং মোবাইল ডিভাইসগুলির সাথে আপনার ওয়েবসাইটের সামঞ্জস্য আরও উন্নত করতে শিখুন।
