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

এই নিবন্ধটি ওয়েবপৃষ্ঠায় একটি পটভূমি চিত্র হিসাবে একটি GIF সেট করার পদ্ধতি প্রদর্শন করে৷

ওয়েবপেজে একটি ব্যাকগ্রাউন্ড ইমেজ হিসাবে GIF কিভাবে সেট করবেন?

একটি পটভূমি চিত্র হিসাবে একটি GIF সেট করা ভিজ্যুয়াল উপাদান যুক্ত করে নজরকাড়া উপাদান তৈরি করতে সহায়তা করে।

GIF গুলি বিশেষভাবে উপযোগী সেই ওয়েবসাইটগুলিতে যেগুলি খেলাধুলা বা বাতিকের অনুভূতি প্রকাশ করতে চায় বা এমন পৃষ্ঠাগুলিতে যা একটি নির্দিষ্ট পণ্য বা বৈশিষ্ট্য হাইলাইট করতে চায়৷ এটি সেট করার জন্য, একটি পটভূমি চিত্র হিসাবে নিম্নলিখিত উদাহরণগুলি দেখুন:

উদাহরণ 1: একটি নির্দিষ্ট পটভূমি হিসাবে GIF সেট করা

যেহেতু এইচটিএমএল উপাদানগুলি যা ওয়েবপৃষ্ঠার সামগ্রী তৈরি করতে সহায়তা করে তা ' ট্যাগ সেজন্য, '' নির্বাচন করা শরীর ” উপাদান এবং এটিতে CSS বৈশিষ্ট্য প্রয়োগ করা। এটি 'এর সমস্ত এইচটিএমএল উপাদানগুলিকে প্রভাবিত করে ট্যাগ

উদাহরণস্বরূপ, '

' এবং '

” ট্যাগগুলি ওয়েবপৃষ্ঠার বিষয়বস্তু হিসাবে ব্যবহার করা হয়। নীচের কোড স্নিপেট দেখুন:

< শরীর >
< h1 > GIF সেট করা হচ্ছে হিসাবে পৃষ্ঠায় একটি পটভূমি চিত্র h1 >
< পি > এই GIF যোগ করা হয়েছে হিসাবে পুরো পৃষ্ঠায় একটি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করে 'পটভূমি-চিত্র' সম্পত্তি। এই নিবন্ধটি Linuxhint দ্বারা চালিত হয়েছে. পি >
শরীর >

এখন, 'বডি' এইচটিএমএল উপাদানটি নির্বাচন করুন ' <স্টাইল> ' ট্যাগ বা একটি পৃথক ' সিএসএস ওয়েবপেজে স্টাইলিং প্রয়োগ করার জন্য ফাইল:

শরীর {
ব্যাকগ্রাউন্ড-ইমেজ: url ( 'sea.gif' ) ;
background-repeat: no-repeat;
ব্যাকগ্রাউন্ড-সাইজ: কভার;
প্যাডিং: 50px;
ফন্ট-আকার: x-বড়;
সাদা রং;
}

উপরের কোড ব্লকে:

• • প্রথমত, ' url() 'পদ্ধতি ব্যবহার করা হয় যা 'এর পথ সংরক্ষণ করে জিআইএফ ' ফাইল। এবং এই পদ্ধতিটি সিএসএসের মান হিসাবে পাস করা হয় “ ব্যাকগ্রাউন্ড-ইমেজ 'সম্পত্তি।
  • পরবর্তী, সেট করুন ' no-পুনরাবৃত্তি ' CSS এর মান হিসাবে ' পটভূমি পুনরাবৃত্তি GIF ফাইলের পুনরাবৃত্তির জন্য সম্পত্তি।
  • তারপর, 'এর মান সেট করুন আবরণ 'সিএসএসে' ব্যাকগ্রাউন্ড সাইজ সমস্ত উপলব্ধ স্থান কভার করার সম্পত্তি
  • এর পরে, 'এর মান প্রদান করুন 50px ' এবং ' x-বড় 'সিএসএসে' প্যাডিং ' এবং ' অক্ষরের আকার ” বৈশিষ্ট্য, যথাক্রমে। এটি পাঠ্যের চারপাশে ব্যবধান যোগ করে এবং ফন্টের আকারকে বড় করে।

সংকলনের পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:

উপরের আউটপুট দেখায় যে ওয়েবপেজে একটি ব্যাকগ্রাউন্ড হিসাবে একটি জিআইএফ যোগ করা হয়েছে।

উদাহরণ 2: একটি স্ক্রোলযোগ্য পটভূমি হিসাবে GIF সেট করা

প্রাথমিকভাবে, একটি ওয়েবপেজ বিষয়বস্তু তৈরি করার জন্য একটি HTML কাঠামো তৈরি করুন:

< div ক্লাস = 'contai' >
< h1 > GIF সেট করা হচ্ছে হিসাবে পৃষ্ঠায় একটি পটভূমি চিত্র h1 >
< পি > এই GIF যোগ করা হয়েছে হিসাবে ব্যবহার করে পুরো পৃষ্ঠায় একটি পটভূমি চিত্র 'পটভূমি-চিত্র' সম্পত্তি। এই নিবন্ধটি Linuxhint দ্বারা চালিত হয়েছে. পি >
div >

< div >
< h3 শৈলী = 'সাদা রং;' > এর বাইরে লেখা বিষয়বস্তু 'div' উপাদান h3 >
div >

উপরের কোডে:

• • প্রথমত, পিতামাতা '
    'ট্যাগটি 'এর একটি শ্রেণীর সাথে ব্যবহার করা হয় contai ”
  • পরবর্তী, ব্যবহার করুন ' h1 ' এবং ' পি HTML উপাদান এবং তাদের ডামি সামগ্রী প্রদান করে।
  • এর পরে, আরেকটি তৈরি করুন '
    'এবং' ব্যবহার করুন

    এটিকে ডামি ডেটা প্রদান করে ট্যাগ করুন।

এখন, নিম্নলিখিত CSS বৈশিষ্ট্যগুলি সন্নিবেশ করে ওয়েব পৃষ্ঠায় একটি পটভূমি হিসাবে GIF যুক্ত করুন:

.contai {
ব্যাকগ্রাউন্ড-ইমেজ: url ( sea.gif ');
background-repeat: no-repeat;
ব্যাকগ্রাউন্ড-সাইজ: কভার;
উচ্চতা: 100vh;
প্রদর্শন: flex;
align-items: কেন্দ্র;
justify-content: কেন্দ্র;
flex-direction: column;
সাদা রং;
ফন্ট-আকার: বড়;
টেক্সট-সারিবদ্ধ: কেন্দ্র;
প্যাডিং: 2rem;
}

উপরে ব্যবহৃত কোড ব্লকের বর্ণনা:

• • প্রথমে সেট করুন ' চিত্র-পথ ', ' no-পুনরাবৃত্তি t' এবং ' আবরণ ' CSS এর মান হিসাবে ' ব্যাকগ্রাউন্ড-ইমেজ ', ' পটভূমি পুনরাবৃত্তি ' এবং ' ব্যাকগ্রাউন্ড সাইজ ” বৈশিষ্ট্য, যথাক্রমে।
  • এরপর, “এর মান সেট করুন 100vh ' এবং ' ফ্লেক্স 'সিএসএসে' উচ্চতা ' এবং ' প্রদর্শন ' বৈশিষ্ট্য।
  • এর পরে, CSS ব্যবহার করুন “ রঙ ', ' অক্ষরের আকার ', ' পাঠ্য-সারিবদ্ধ ' এবং ' প্যাডিং ” বিষয়বস্তুতে স্টাইলিং প্রয়োগ করার বৈশিষ্ট্য।

সংকলন প্রক্রিয়া শেষ হওয়ার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:

আউটপুট দেখায় যে ' জিআইএফ ” পুরো পৃষ্ঠায় একটি পটভূমি চিত্র হিসাবে সন্নিবেশ করা হয়েছে৷

উপসংহার

ওয়েবপেজে একটি ব্যাকগ্রাউন্ড ইমেজ হিসেবে GIF সেট করতে, CSS “ ব্যাকগ্রাউন্ড-ইমেজ 'সম্পত্তি HTML এ ব্যবহার করা হয়' শরীর ' উপাদান। CSS প্রপার্টি যেটি 'বডি' এলিমেন্টে প্রয়োগ করা হয় তা স্বয়ংক্রিয়ভাবে সমস্ত ধারণকারী উপাদানগুলিতে প্রয়োগ করা হয়। সেট করে ' 100vh ” উচ্চতার সম্পত্তির মান হিসাবে, স্ক্রোলিং প্রভাবও সক্ষম করা যেতে পারে। এটি ব্যাকগ্রাউন্ড জিআইএফকে স্ক্রোল বরাবর সরানোর অনুমতি দেয়। এই নিবন্ধটি দেখিয়েছে কিভাবে একটি GIF ওয়েবপেজে ব্যাকগ্রাউন্ড ইমেজ হিসেবে সেট করা যায়।