jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ensure hero image displays correctly regardless of background color 

Adds a transparent background and z-index to ensure the hero image is layered correctly.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 993772ca-0b6c-4a66-865f-43bf247cd140
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/4430288d-0efb-4b2b-b6c2-5df36c87e5a9.jpg
This commit is contained in:
JeffEmmett 2025-06-14 09:41:59 +00:00
parent 4d033a4ea0
commit 074e04aab9
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/components/home/hero-section.tsx
View File

@ -3,15 +3,16 @@ import FadiaHeroImage from "../../assets/Fadia-15.jpg";
export function HeroSection() {
return (
<section className="relative">
<div className="bg-cover bg-center h-[90vh] flex items-center justify-center"
<section className="relative bg-transparent">
<div className="relative bg-cover bg-center h-[90vh] flex items-center justify-center bg-transparent"
style={{
backgroundImage: `url(${FadiaHeroImage})`,
backgroundPosition: "center"
backgroundPosition: "center",
backgroundColor: "transparent"
}}>
<div className="absolute inset-0 bg-black bg-opacity-20"></div>
<div className="absolute inset-0 bg-black bg-opacity-20 z-10"></div>
<div className="relative text-center px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
<div className="relative z-20 text-center px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
<h1 className="text-4xl md:text-5xl font-playfair font-bold text-white leading-tight mb-48">
Feel at Home in your Body
</h1>