#What's the most efficient way to include a simple CSS background-image using Astro?

1 messages · Page 1 of 1 (latest)

pseudo coyote
#

Just read the recent question here about not being able to import a variable into a CSS background-image url path and saw a couple of suggested inline workarounds. However, if I just want to use an image located in the public directory, is there a way to do that without even having to import anything?

For example, I have slide-1.webp currently located in both public/images as well as src/images of my folder structure. I just want to use it (from either location) as a background image for one of the divs on my index.astro page, similar to the following:

.container {
height: 90vh;
background-image: url('images/slide-1.webp');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 0;
}

However, no matter how I write the path, it doesn't work. Seems like this should be a simple concept to execute. What am I missing? Thanks!

glossy glen
#

that should work. could you please make a simple reproduction eg. on Stackblitz through astro.new ?

#

also (just in case) have you tried adding an initial slash?

- background-image: url('images/slide-1.webp');
+ background-image: url('/images/slide-1.webp');
pseudo coyote
#

Thanks so much for the reply. Sorry, bit of a newb here and can't figure out how to start an Astro project on Stackblitz. Can confirm that I have just different iterations of the url path (with slash, without, with ../, etc.) but none have worked for the background image. Simply adding an <img src="/images/slide-1.webp"> to the HTML code works fine though. It's just something about the background path that isn't connecting.

#

Here's my code for the index.astro file in question:

#

import Layout from '../layouts/Layout.astro';
import Nav from '../components/Nav.astro';

<Layout title="Example">
<main style="container">
<Nav />
<img src="images/slide-1.webp">
</main>
</Layout>

<style>
main {

}
.container {
    height: 90vh;
    background-image: url('images/slide-1.webp');        
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}

</style>

#

Image renders fine in the HTML IMG tag but not in the CSS background-image path.

glossy glen
#

could you open browser devtools and point to the .container element and see what is shown in the "styles" tab, maybe there could be a clue there?

#

side note - you can go to https://astro.new to spin up a new Astro project on various services with a single click - useful to create repro or just to do a quick check whether something works or not

pseudo coyote
#

Well, turns out I'm a complete idiot and the culprit was a simple typo.... I was using <main style="container"> instead of <main class="container">!

#

What a rookie mistake.

glossy glen
#

😆 i did not catch it either!!

pseudo coyote
#

Thank you so much for taking the time, however, and great to the tip about astro.new!

#

Really appreciate it. 🙂