কিভাবে CSS ব্যাকগ্রাউন্ড-ইমেজ কাজ করছে না তা ঠিক করবেন এইচটিএমএল/সিএসএস

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

এটিতে সাহায্য করার জন্য, HTML এবং CSS ব্যবহার করে আপনার ব্যাকগ্রাউন্ড-ইমেজ কাজ করছে না তা ঠিক করার জন্য এখানে চারটি উপায় রয়েছে:

1. আপনার CSS ফাইলটি আপনার HTML ফাইলে সঠিকভাবে লিঙ্ক করা আছে কিনা তা পরীক্ষা করুন।

আপনার ওয়েবসাইটে আপনার CSS শৈলী লোড করার জন্য, আপনাকে একটি <link> যোগ করতে হবে আপনার HTML ফাইলে ট্যাগ করুন। এই ট্যাগটি <head></head> এর ভিতরে থাকা উচিত ট্যাগ, এবং দেখতে এইরকম কিছু হওয়া উচিত:

<link rel="stylesheet" href="/style.css">

আপনার CSS ফাইলটি সঠিকভাবে লোড হয়েছে কি না তা আপনি কিভাবে বুঝবেন?

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

আপনি পৃষ্ঠার যেকোনো জায়গায় ডান-ক্লিক করে এবং "ইন্সপেক্ট এলিমেন্ট" নির্বাচন করে বা Ctrl-Shift-I টিপে আপনার ব্রাউজারের ইন্সপেক্টর টুল চেক করতে পারেন। ইন্সপেক্টরে, যদি আপনি একটি ত্রুটি দেখেন যা বলে যে 404 not found CSS ফাইলের জন্য, অথবা The resource... was blocked due to MIME type mismatch , এটি আপনাকে বলে যে CSS ফাইলটি লোড করার সময় একটি সমস্যা ছিল৷

৷

কিভাবে CSS ব্যাকগ্রাউন্ড-ইমেজ কাজ করছে না তা ঠিক করবেন এইচটিএমএল/সিএসএস

আপনি যদি এই ত্রুটিগুলির মধ্যে একটি দেখতে পান এবং আপনার ওয়েবসাইটটি স্টাইলবিহীন দেখায়, তাহলে প্রথমেই চেক করতে হবে <link> এ ট্যাগ নিশ্চিত করুন যে href অ্যাট্রিবিউট আপনার প্রকৃত CSS ফাইলের মতো একই ফাইলের নাম লোড করছে এবং পথটি সঠিক।

আপনার এইচটিএমএল ফাইল যেখানে আছে তার সাথে পাথটি আপেক্ষিক হওয়া দরকার। যদি CSS ফাইলটি আপনার HTML ফাইলের মতো একই ডিরেক্টরিতে থাকে, আপনি href সেট করতে পারেন style.css হতে (বা আপনার CSS ফাইলের নাম যাই হোক না কেন)।

আমি সাধারণত একটি ফরোয়ার্ড স্ল্যাশ / রাখি পথের আগে, উদাহরণস্বরূপ:href="/style.css" . এটি নিশ্চিত করবে যে পথটি আপনার ওয়েবসাইট রুটে শুরু হবে।

আপনার এটির প্রয়োজন হতে পারে যদি আপনার কাছে বিভিন্ন সাবফোল্ডারে পৃষ্ঠা থাকে যা একই <head> লোড হচ্ছে কোড উদাহরণস্বরূপ, যদি আপনি একটি টেমপ্লেটেড CMS (কন্টেন্ট ম্যানেজমেন্ট সিস্টেম) ব্যবহার করেন যেখানে শেয়ার করা কোড আছে।

2. নিশ্চিত করুন যে ছবির পথটি ব্যাকগ্রাউন্ড-ইমেজ url-এ সঠিকভাবে সেট করা আছে।

একবার আপনি নিশ্চিত করেছেন যে আপনার CSS ফাইলটি সঠিকভাবে লিঙ্ক করা হয়েছে, এছাড়াও পরীক্ষা করুন যে ছবিটি নিজেই সঠিকভাবে সেট করা আছে। আবার, আপনি চেক করতে ব্রাউজারে আপনার কোড ইন্সপেক্টর খুলতে চাইবেন।

ব্যাকগ্রাউন্ড-ইমেজটি সঠিকভাবে লোড হয়েছে কিনা তা কীভাবে বুঝবেন?

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

যদি এটি ঘটতে থাকে, ছবি ফাইলের নামটি প্রকৃত ফাইলের সাথে মেলে এবং background-image: url() এর পাথটি দুবার চেক করুন। সঠিক অবস্থানে যাচ্ছে।

ইমেজ ফাইলের অবস্থান সিএসএস ফাইলের অবস্থানের সাথে আপেক্ষিক হতে হবে, আপনার ওয়েবসাইট রুট নয়। তাই যদি আপনার CSS ফাইলটি একটি সাবফোল্ডারে থাকে, তাহলে CSS ফাইলটি আপনার রুটে থাকলে পাথটি ভিন্ন হতে পারে।

এটি ব্যাখ্যা করতে সাহায্য করার জন্য, ধরুন আপনার কাছে এইরকম একটি ওয়েবসাইট ফাইল কাঠামো আছে:

(project folder)
  |-- index.html
  |-- (css)
        |-- style.css
  |-- (img)
        |-- cat-pic-1.jpg

এই ওয়েবসাইটটিতে index.html রয়েছে প্রজেক্ট রুটে ফাইল, একটি css ফোল্ডার যেটিতে style.css আছে ফাইল, এবং একটি img যে ফোল্ডারে cat-pic-1.jpg ছবি রয়েছে .

আপনার CSS স্টাইলে, আপনি যদি cat-pic-1.jpg লোড করতে চান একটি ব্যাকগ্রাউন্ড ইমেজ হিসাবে, ফাইল পাথের প্রয়োজন:

css থেকে এক স্তর উপরে যান ফোল্ডার,
img-এ নেভিগেট করুন ফোল্ডার,
তারপর ইমেজ ফাইলটি নিজেই লোড করুন।

background-image CSS ফাইলের প্রপার্টি দেখতে এইরকম হওয়া উচিত:background-image: url('../img/cat-pic-1.jpg') .

../ চিহ্নের অর্থ হল আপনি ফাইল কাঠামোর এক স্তর উপরে যাবেন।

আপনি সেটিং করে একই জিনিস করতে পারেন:background-image: url('/img/cat-pic-1.jpg') .

এই পদ্ধতিটি ফরোয়ার্ড স্ল্যাশ (/) ব্যবহার করে ) ওয়েবসাইট রুট থেকে শুরু করুন, তারপর img-এ যান ইমেজ ফাইল লোড করার জন্য ফোল্ডার।

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

3. স্পষ্টভাবে উপাদানের প্রস্থ এবং/অথবা উচ্চতা সেট করুন।

যদি ছবিটি দেখানো না হয়, কিন্তু আপনি কোনো 404 ত্রুটি না পান, তাহলে কোড ইন্সপেক্টরে যান এবং উপাদানটি নিজেই পরীক্ষা করুন।

উপাদানটিতে কোনো HTML বিষয়বস্তু না থাকলে, এর প্রস্থ বা উচ্চতা শূন্য (বা উভয়ই!) থাকতে পারে। এর মানে হল যদিও ব্যাকগ্রাউন্ড ইমেজটি টেকনিক্যালি সঠিকভাবে লোড করা হয়েছে, তবুও উপাদানটি মূলত অদৃশ্য থাকে যদি এটি 0px হয় আকারে৷

৷

একটি ওয়েবসাইট এবং কোড ইন্সপেক্টর দেখানো উপরের উদাহরণটি দেখুন। আপনি যদি .card__image-এর উপর হোভার করেন ডান ফলকে উপাদান, বাম ফলকের উপাদানটির উপরে একটি লেবেল প্রদর্শিত হবে, আপনাকে বলবে যে এটিতে 354px আছে প্রস্থ এবং 0px উচ্চতা।

সেই 0px উচ্চতা মানে উপাদানটি দৃশ্যমান হবে না।

এটি ঠিক করতে, স্পষ্টভাবে .card__image-এর উচ্চতা সেট করুন height: 120px এ উপাদান . যদি উপাদানটিতে বিভিন্ন দৈর্ঘ্যের পাঠ্য সামগ্রী থাকতে পারে, তাহলে আপনি এটিকে min-height: 120px এ সেট করতে পারেন পরিবর্তে, তাই এটি সর্বনিম্ন হবে 120px লম্বা কিন্তু লম্বা হতে পারে যদি টেক্সট কন্টেন্টে আরও জায়গা লাগে।

4. নিশ্চিত করুন যে আপনি CSS ব্যাকগ্রাউন্ড বৈশিষ্ট্যে সঠিক সিনট্যাক্স ব্যবহার করছেন।

একটি শেষ জিনিস যা আপনি পরীক্ষা করতে পারেন তা হল আপনি ব্যাকগ্রাউন্ড সিএসএস বৈশিষ্ট্যের জন্য সঠিক সিনট্যাক্স ব্যবহার করছেন কিনা৷

৷

সম্ভাব্য মান সহ এখানে কিছু সাধারণ যা আপনি ব্যবহার করছেন:

background-color: #000000;
background-image: url("/landscape1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;

আপনি শর্টহ্যান্ড background ব্যবহার করতে পারেন বৈশিষ্ট্য যা আপনাকে একটি শৈলী নিয়মে সেই সমস্ত ভিন্ন মানগুলিকে একত্রিত করতে দেয়:

background: #000 center/cover url("/img/landscape1.jpg") no-repeat;

আপনি যদি অনেকগুলি মান সহ এই শর্টহ্যান্ড প্রপার্টি ব্যবহার করেন তবে নিশ্চিত করুন যে সিনট্যাক্সটি সঠিক। বিভিন্ন ব্যাকগ্রাউন্ড প্রপার্টির ক্রম কোন ব্যাপার না, কিন্তু আপনি যদি background-size সেট করে থাকেন তবে একটি জটিল সমস্যা আছে .

background-size মানটি শুধুমাত্র তখনই ব্যবহার করা যেতে পারে যখন এটি তাৎক্ষণিকভাবে background-position অনুসরণ করে মান, একটি ফরোয়ার্ড স্ল্যাশ সহ (/ ) তাদের মধ্যে. আমাদের উদাহরণে এটি এভাবে লেখা হয়েছে: center/cover , যেখানে center হল background-position এবং cover হল background-size .

আপনি background-position ব্যবহার করতে পারেন নিজেই মান, কিন্তু আপনি যদি শুধুমাত্র cover ব্যবহার করার চেষ্টা করেন নিজে থেকেই, CSS নিয়মটি অবৈধ এবং কোনটিই নয় হবে৷ ব্যাকগ্রাউন্ডের বৈশিষ্ট্যগুলি সব কাজ করবে৷

৷

যদি তা হয়, তাহলে আপনি কোড ইন্সপেক্টরে এইভাবে অবৈধ নিয়ম দেখতে পারবেন: