Answers.Body: <p>You would need to build the complete URL to your file in order for it to work in your CSS.</p>
  
  <p>See this answer:<br>
  <a href="https://craftcms.stackexchange.com/questions/12990/do-remote-assets-ie-s3-have-file-paths">Do Remote Assets (ie. S3) have file paths?</a></p>
  
  <p>If the <code>background-image</code> is handled by something like a single or an entry template you could handle it with an inline style tag:</p>
  
  <p><strong>Regular Loading:</strong><br>
  <code>{% set image = entry.backgroundImage.first()%}</code></p>
  
  <p><strong>Eager-loaded:</strong><br>
  <code>{% set image = entry.backgroundImage[0] ?? null%}</code></p>
  
  <p><strong>Template:</strong><br>
  <code>&lt;main style="background-image: url({% if image %}{{image.url}}{% endif %});"&gt;&lt;/main&gt;</code></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-04-11T18:20:49.350Z
Answers.LastActivityDate: 2016-04-11T18:28:16.283Z
Answers.LastEditDate: 2017-04-13T12:51:00.303Z
Answers.UserDisplayName: mcclaskiem
Body: <p>Is there a way to use a local url when my assets are stored in an S3 bucket?</p>
  
  <p>I have a bucket I'm pointing to and in there I have a folder called backgroundImg with a background.png</p>
  
  <p>I'm trying to access this from my CSS like </p>
  
  <p><code>background-image: url('backgroundImg/background.png');</code></p>
  
  <p>But it cannot find this url. It's building the url <code>localhost/assets/backgroundImg/background.png</code></p>
  
  <p>Is there any way to use the local path instead of an insanely long s3 url that is hardcoded?</p>
  
Tags: <assets><s3>
Title: Craft Assets on S3 bucket
ThreadText: # Craft Assets on S3 bucket
  
  (Asked by: username_0 on 2016-04-11)
  
  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?
  
  **Tags:** assets, s3
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-04-11. Score: 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?](https://craftcms.stackexchange.com/questions/12990/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>`
  
  
  ---
  
  