Craft Assets on S3 bucket

Question

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?

Answer 1

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>