0

Is there a way to use a local url when my assets are stored in an S3 bucket?

I have a bucket I'm pointing to and in there I have a folder called backgroundImg with a background.png

I'm trying to access this from my CSS like

background-image: url('backgroundImg/background.png');

But it cannot find this url. It's building the url localhost/assets/backgroundImg/background.png

Is there any way to use the local path instead of an insanely long s3 url that is hardcoded?

2

You would need to build the complete URL to your file in order for it to work in your CSS.

See this answer:
Do Remote Assets (ie. S3) have file paths?

If the background-image is handled by something like a single or an entry template you could handle it with an inline style tag:

Regular Loading:
{% set image = entry.backgroundImage.first()%}

Eager-loaded:
{% set image = entry.backgroundImage[0] ?? null%}

Template:
<main style="background-image: url({% if image %}{{image.url}}{% endif %});"></main>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.