46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
export default function TestImagePage() {
|
|
return (
|
|
<div className="min-h-screen p-8">
|
|
<h1 className="text-2xl font-bold mb-4">Test Background Image</h1>
|
|
|
|
{/* Test 1: Direct img tag */}
|
|
<div className="mb-8">
|
|
<h2 className="font-semibold mb-2">Test 1: Direct img tag</h2>
|
|
<img
|
|
src="/assets/images/background-section-1-landingpage.png"
|
|
alt="test"
|
|
className="w-64 h-32 object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Test 2: CSS background-image */}
|
|
<div className="mb-8">
|
|
<h2 className="font-semibold mb-2">Test 2: CSS background-image</h2>
|
|
<div
|
|
className="w-64 h-32"
|
|
style={{
|
|
backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Test 3: Absolute positioning */}
|
|
<div className="mb-8">
|
|
<h2 className="font-semibold mb-2">Test 3: Absolute positioning (like hero section)</h2>
|
|
<div className="relative w-64 h-32 bg-gray-200">
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|