How can I use an imported image inside CSS?
import localBirdImage from '../../images/subfolder/localBirdImage.png';
<style>
body {
background-image: url(localBirdImage)
}
#How to use imported image in CSS
steel fox
wary roverBOT
Hi @steel fox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the extracts, Astro does not directly support using imported images inside CSS. However, there are a few workarounds you can consider:
- Use images from the
public/directory: If you place your images inside thepublic/directory, you can reference them by absolute URL path directly in your CSS. This is the simplest way to reference an image. For example:
body {
background-image: url('/images/subfolder/localBirdImage.png');
}
This method is recommended for most users who are getting started with Astro (source (https://docs.astro.build/en/guides/upgrade-to/v1#how-to-resolve-images--other-assets)).
- Use JavaScript to dynamically set styles: You can use JavaScript to dynamically set the
background-imageproperty of an element. This allows you to use imported images. For example:
import localBirdImage from '../../images/subfolder/localBirdImage.png';
document.body.style.backgroundImage = `url(${localBirdImage})`;
This method was suggested in a GitHub issue (https://github.com/withastro/astro/issues/310) and might be useful if you need to work with imported images.