You can see the code in my github repo,
The problem is that i want the image to be the height of the images to be the full with of the screen and the psicosmith image to be above the background image, but when i zoom it the psicosmith image move.This is the code
<code> <header class="h-full">
<figure class="flex h-full p-0 m-0 ">
<Image class="h-full w-fit relative z-1" src={Background} alt="Logotipo" />
<Image class=" h-full w-fit relative right-36" src={PsicoSmith} alt="Foto de Smith Quintero" />
</figure>
</header>
and this is the layout
<!doctype html>
<html lang="es" class="w-full h-full">
<head>
<meta charset="UTF-8"/>
<meta name="description" content=" Bienvenido/a a la plataforma de terapia online de Smith Quintero. Encuentra apoyo profesional y compasivo para tus necesidades de salud mental. Nuestra psicóloga licenciada ofrece sesiones de terapia personalizadas para ayudarte a enfrentar los desafíos de la vida. Da el primer paso hacia la sanación y reserva tu sesión hoy mismo."/>
<meta name="viewport" content="width=device-width" initial-scale="1"/>
<meta name="robots" content="index, follow">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<meta itemprop="specialty" content="Psicólogos en línea, Psicólogo online, psicólogos por chat.">
<meta name="keywords" content="psicosmith, psicologa, terapia, salud mental, psicologa Smith Quintero, psicologos en linea, psicologos online, terapia online, depresion, ansiedad.">
<title>{title}</title>
</head>
<body class="box-border m-0 p-0 w-full h-full">
<slot />
</body>
</html>
</code>
<code> <header class="h-full">
<figure class="flex h-full p-0 m-0 ">
<Image class="h-full w-fit relative z-1" src={Background} alt="Logotipo" />
<Image class=" h-full w-fit relative right-36" src={PsicoSmith} alt="Foto de Smith Quintero" />
</figure>
</header>
and this is the layout
<!doctype html>
<html lang="es" class="w-full h-full">
<head>
<meta charset="UTF-8"/>
<meta name="description" content=" Bienvenido/a a la plataforma de terapia online de Smith Quintero. Encuentra apoyo profesional y compasivo para tus necesidades de salud mental. Nuestra psicóloga licenciada ofrece sesiones de terapia personalizadas para ayudarte a enfrentar los desafíos de la vida. Da el primer paso hacia la sanación y reserva tu sesión hoy mismo."/>
<meta name="viewport" content="width=device-width" initial-scale="1"/>
<meta name="robots" content="index, follow">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<meta itemprop="specialty" content="Psicólogos en línea, Psicólogo online, psicólogos por chat.">
<meta name="keywords" content="psicosmith, psicologa, terapia, salud mental, psicologa Smith Quintero, psicologos en linea, psicologos online, terapia online, depresion, ansiedad.">
<title>{title}</title>
</head>
<body class="box-border m-0 p-0 w-full h-full">
<slot />
</body>
</html>
</code>
<header class="h-full">
<figure class="flex h-full p-0 m-0 ">
<Image class="h-full w-fit relative z-1" src={Background} alt="Logotipo" />
<Image class=" h-full w-fit relative right-36" src={PsicoSmith} alt="Foto de Smith Quintero" />
</figure>
</header>
and this is the layout
<!doctype html>
<html lang="es" class="w-full h-full">
<head>
<meta charset="UTF-8"/>
<meta name="description" content=" Bienvenido/a a la plataforma de terapia online de Smith Quintero. Encuentra apoyo profesional y compasivo para tus necesidades de salud mental. Nuestra psicóloga licenciada ofrece sesiones de terapia personalizadas para ayudarte a enfrentar los desafíos de la vida. Da el primer paso hacia la sanación y reserva tu sesión hoy mismo."/>
<meta name="viewport" content="width=device-width" initial-scale="1"/>
<meta name="robots" content="index, follow">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<meta itemprop="specialty" content="Psicólogos en línea, Psicólogo online, psicólogos por chat.">
<meta name="keywords" content="psicosmith, psicologa, terapia, salud mental, psicologa Smith Quintero, psicologos en linea, psicologos online, terapia online, depresion, ansiedad.">
<title>{title}</title>
</head>
<body class="box-border m-0 p-0 w-full h-full">
<slot />
</body>
</html>
I try to use z-index but it didn’t work
New contributor
riadfrancoq is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.