আজকাল, প্রতিক্রিয়াশীল ব্যাকগ্রাউন্ড ইমেজ সহ ওয়েবসাইটগুলির চাহিদা রয়েছে। প্রতিক্রিয়াশীল ওয়েবসাইটগুলি মোবাইল, ট্যাবলেট বা ডেস্কটপ সহ প্রায় সমস্ত ডিভাইসে ব্যবহারকারীদের আদর্শ ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। প্রতিক্রিয়াশীল ছবিগুলি ওয়েবসাইটের পটভূমি, স্ক্রীনের আকার এবং মাত্রাগুলিকে মানিয়ে নিতে পারে৷ প্রতিক্রিয়াশীল ছবিগুলি নিশ্চিত করে যে গুণমান এবং অনুপাত বজায় রাখা হয়। উপরন্তু, প্রতিক্রিয়াশীল ব্যাকগ্রাউন্ড ইমেজ সহ ওয়েবসাইট দ্রুত লোড হয়।
এই নির্দেশিকাটি পর্দার মাত্রার সাথে পটভূমির চিত্রগুলিকে মানিয়ে নেওয়ার নির্দেশনা প্রদান করবে।
ব্যাকগ্রাউন্ড ইমেজ স্ক্রীন ডাইমেনশনের সাথে কিভাবে মানিয়ে নেবেন?
নিচের ধাপে ধাপে নির্দেশাবলী অনুসরণ করে চিত্রটি পর্দার মাত্রার সাথে মানিয়ে নিতে পারে।
ধাপ 1: একটি HTML স্ট্রাকচার তৈরি করুন
প্রথমে, একটি HTML গঠন তৈরি করুন এবং ব্যবহার করে বাহ্যিক স্টাইল শীট যোগ করুন <লিঙ্ক> HTML এর প্রধান বিভাগে ট্যাগ করুন। সেই উদ্দেশ্যে, কেবল ' 'হেড ট্যাগের ভিতরে। দ্য ' rel ” ট্যাগ HTML নথির সাথে ফাইলের সম্পর্ক নির্দিষ্ট করে। দ্য ' href ” ট্যাগ CSS ফাইলের ঠিকানা নির্দিষ্ট করে:
< html >
< মাথা >
< লিঙ্ক rel = 'স্টাইলশীট' href= 'style.css' >
< শিরোনাম > প্রতিক্রিয়াশীল ব্যাকগ্রাউন্ড ইমেজ শিরোনাম >
মাথা >
< শরীর >
-- অন্যান্য বিষয়বস্তু যোগ করার জন্য এলাকা-- >
শরীর >
html >
ধাপ 2: CSS প্রয়োগ করুন
এখন, সিএসএস প্রয়োগ করুন “ শরীর ' অধ্যায়. প্রথমে ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট করুন। সেই উদ্দেশ্যে, ব্যবহার করুন ' ব্যাকগ্রাউন্ড-ইমেজ ' এবং নির্দিষ্ট করুন ' url() ইমেজ ফাইলের ঠিকানা ধারণকারী মান।
এর পরে, ব্যবহার করুন ' ব্যাকগ্রাউন্ড-ইমেজ 'চিত্রের আকার নির্দিষ্ট করতে, ' পটভূমি পুনরাবৃত্তি ' চিত্রের পুনরাবৃত্তি সেট করার জন্য সম্পত্তি, এবং ' পৃষ্ঠভূমি সংযুক্তি পৃষ্ঠার বাকি অংশের সাথে ছবিটি স্ক্রোল করে কিনা তা সেট করতে। অবশেষে, সেট করুন ' মার্জিন ' এবং ' প্যাডিং ' প্রতি ' 0 ”:
শরীর {ব্যাকগ্রাউন্ড-ইমেজ: url ( 'test-image.jpg' ) ;
পটভূমি আকার: 100 % 100 % ;
/* ইমেজ স্কেল করুন 100 % প্রস্থ এবং 100 % উচ্চতা */
background-repeat: no-repeat;
ব্যাকগ্রাউন্ড-সংযুক্তি: স্থির;
মার্জিন: 0 ;
প্যাডিং: 0 ;
/* ঐচ্ছিক: স্থির ব্যাকগ্রাউন্ড */
}
আউটপুট
ব্রাউজার উইন্ডোটি চুক্তি করার আগে এটি আউটপুট:
ব্রাউজার সংকোচনের পরে:
উপরের আউটপুট নিশ্চিত করে যে চিত্রটি পর্দার মাত্রার সাথে পটভূমিকে অভিযোজিত করেছে।
উপসংহার
ব্যাকগ্রাউন্ড ইমেজগুলিকে স্ক্রিনের মাত্রার সাথে মানিয়ে নিতে, প্রথমে ' ভিউপোর্ট ” হেড বিভাগে মাত্রা এবং স্কেলিং নিয়ন্ত্রণ করতে। তারপর, একটি HTML গঠন তৈরি করুন এবং CSS প্রয়োগ করুন। CSS-এ, সেট করুন “ ব্যাকগ্রাউড-আকার ' সম্পত্তির মান ' আবরণ একটি চিত্রের উচ্চতা এবং প্রস্থ স্কেল করার মান। এই নিবন্ধটি পর্দার মাত্রার সাথে পটভূমির চিত্রগুলিকে অভিযোজিত করার জন্য একটি সম্পূর্ণ নির্দেশিকা উপস্থাপন করেছে।