refactor: Remove BackgroundImageDiv component
Component is redundant, move style to CSS class and allows to set the image via CSS variables
This commit is contained in:
parent
6e84ff1ec3
commit
3bd2b6a4b6
1 changed files with 0 additions and 35 deletions
|
|
@ -1,35 +0,0 @@
|
||||||
---
|
|
||||||
import { getImage } from 'astro:assets';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
src: string;
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { src, width, height } = Astro.props;
|
|
||||||
|
|
||||||
const optimizedBackground = await getImage({
|
|
||||||
src,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
format: 'webp',
|
|
||||||
});
|
|
||||||
---
|
|
||||||
|
|
||||||
<div id="bg">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style define:vars={{ bgImage: `url(${optimizedBackground.src})` }}>
|
|
||||||
#bg {
|
|
||||||
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
|
||||||
var(--bgImage);
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
color: var(--prj-bg);
|
|
||||||
|
|
||||||
padding-top: var(--prj-spacing-3);
|
|
||||||
padding-bottom: var(--prj-spacing-3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue