CSS-এ ব্যাকগ্রাউন্ড ইমেজ নিয়ে কাজ করা জটিল হতে পারে। কোডে সেট করলেও অন্যান্য কারণে ব্যাকগ্রাউন্ড ইমেজ পেজে দেখাওয়া বন্ধ থাকতে পারে।
সহায়তার জন্য, HTML এবং CSS ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ কাজ না করার ৪টি সমাধান নিচে দেওয়া হলো:
১. আপনার CSS ফাইল HTML ফাইলে সঠিকভাবে লিঙ্ক করা আছে কিনা যাচাই করুন।
আপনার ওয়েবসাইটে CSS স্টাইল লোড করার জন্য, HTML ফাইলে <link> ট্যাগ যোগ করতে হবে। এই ট্যাগটি <head></head> ট্যাগের ভিতরে থাকা উচিত এবং নিচের মতো দেখাবে:
<link rel="stylesheet" href="/style.css">CSS ফাইল সঠিকভাবে লোড হয়েছে কিনা কীভাবে বুঝবেন?
একটি সংকেত হলো: ওয়েবসাইট লোড করলে ব্যাকগ্রাউন্ড সাদা, সব টেক্সট Times New Roman ফন্টে, এবং কোনো রঙ বা অন্যান্য স্টাইল না থাকা।
আপনি ব্রাউজারের ইন্সপেক্টর টুলেও চেক করতে পারেন: পেজে রাইট-ক্লিক করে "Inspect Element" বেছে নিন অথবা Ctrl-Shift-I চাপুন। ইন্সপেক্টরে যদি CSS ফাইলের জন্য 404 not found বা The resource... was blocked due to MIME type mismatch এরর দেখান, তবে বুঝবেন CSS ফাইল লোড होनेে সমস্যা হয়েছে।
যদি এই এররগুলো দেখেন এবং ওয়েবসাইটটি অনস্টাইলড দেখায়, প্রথমে <link> ট্যাগ চেক করুন। নিশ্চিত করুন যে href অ্যাট্রিবিউট আপনার আসল CSS ফাইলের নাম এবং পাথ সঠিকভাবে লোড করছে।
পাথটি আপনার HTML ফাইলের অবস্থান থেকে রিলেটিভ হতে হবে। যদি CSS ফাইল HTML ফাইলের সাথে একই ডিরেক্টরিতে থাকে, তবে href কে style.css (আপনার CSS ফাইলের নাম) সেট করতে পারেন।
আমি সাধারণত পথের আগে ফরোয়ার্ড স্ল্যাশ / ব্যবহার করি, যেমন: href="/style.css"। এটি নিশ্চিত করে যে পথ আপনার ওয়েবসাইটের রুট থেকে শুরু হবে।
এটি প্রয়োজন হতে পারে যদি আপনার একই <head> কোড লোড করার একাধিক সাবফোল্ডারে পেজ থাকে। উদাহরণস্বরূপ, শেয়ার্ড কোড বিশিষ্ট টেমপ্লেটেড CMS (কন্টেন্ট ম্যানেজমেন্ট সিস্টেম) ব্যবহার করলে।
২. background-image 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ফোল্ডারে নেভিগেট করবে,- তারপর ইমেজ ফাইলটি লোড করবে।
CSS ফাইলে background-image প্রপার্টিটি নিচের মতো হওয়া উচিত: background-image: url('../img/cat-pic-1.jpg')।
../ চিহ্নগুলো মানে ফাইল স্ট্রাকচারে এক লেভেল উপরে যাওয়া।
আপনি একই কাজ করতে পারেন: background-image: url('/img/cat-pic-1.jpg') সেট করে।
এই পদ্ধতিতে ফরোয়ার্ড স্ল্যাশ (/) ব্যবহার করে ওয়েবসাইট রুট থেকে শুরু করে img ফোল্ডারে গিয়ে ইমেজ ফাইল লোড করা হয়।
আপনি প্যারেন্ট ফোল্ডারের মাধ্যমে নেভিগেট করুন বা ওয়েবসাইট রুট থেকে শুরু করুন, আপনার কোড ইন্সপেক্টর ব্যবহার করে পরীক্ষা করুন এবং চেক করুন যে ইমেজ লোড হচ্ছে কিনা বা 404 এরর দিচ্ছে কিনা।
৩. এলিমেন্টের প্রস্থ এবং/অথবা উচ্চতা স্পষ্টভাবে সেট করুন।
ইমেজ দেখাচ্ছে না কিন্তু কোনো 404 এররও নেই, তবে কোড ইন্সপেক্টরে এলিমেন্টটি চেক করুন।
যদি এলিমেন্টে কোনো HTML কন্টেন্ট না থাকে, তবে এর প্রস্থ বা উচ্চতা (অথবা উভয়ই!) শূন্য হতে পারে। এর মানে ব্যাকগ্রাউন্ড ইমেজ teknিক্যালি সঠিকভাবে লোড হওয়া সত্ত্বেও, এলিমেন্টটি實際上 অদৃশ্য যদি এর আকার 0px হয়।
উপরের উদাহরণে একটি ওয়েবসাইট এবং কোড ইন্সপেক্টর দেখানো হয়েছে। ডান প্যানেলে .card__image এলিমেন্টের ওপর হভার করলে বাম প্যানেলে একটি লেবেল দেখাবে যে এর প্রস্থ 354px এবং উচ্চতা 0px।
সেই 0px উচ্চতা মানে এলিমেন্টটি দৃশ্যমান হবে না।
এটি সমাধান করতে, .card__image এলিমেন্টের উচ্চতা স্পষ্টভাবে height: 120px সেট করুন। যদি এলিমেন্টে ভিন্ন দৈর্ঘ্যের টেক্সট কন্টেন্ট থাকতে পারে, তবে min-height: 120px ব্যবহার করুন, যাতে এটি কমপক্ষে 120px উঁচু থাকে কিন্তু টেক্সট কন্টেন্ট বেশি স্পেস চাইলে বড় হতে পারে।
৪. CSS ব্যাকগ্রাউন্ড প্রপার্টিতে সঠিক সিনট্যাক্স ব্যবহার করা আছে কিনা নিশ্চিত করুন।
একটি শেষ বিষয় চেক করতে পারেন: আপনি 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 রুলটি অবৈধ হবে এবং কোনো ব্যাকগ্রাউন্ড প্রপার্টি কাজ করবে না।
যদি এটি হয়, কোড ইন্সপেক্টরে অবৈধ রুলটি দেখতে পাবেন:
