I’ve searched, but my few matches aren’t exactly like the issue I’m experiencing. Local testing works fine, but deploying in Render ignores the images. My expectation is the background image will load, it doesn’t.
Root Directory:
.
├── main.py
└── static
├── about.html
├── css
│ └── style.css
├── images
│ └── background_image.png
└── index.html
main.py:
from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
app = FastAPI()
Mount the static directory
app.mount(“/static”, StaticFiles(directory=“static”), name=“static”)
@app.get (“/”)
async def welcome():
return FileResponse(‘static/index.html’)
@app.get (“/about”)
async def about():
return FileResponse(‘static/about.html’)
index.html
Welcome PageThis site is under construction. Thank you for your patience.
style.css
/* style.css */
.navbar {
position: absolute;
top: 0;
right: 0;
padding: 10px;
}
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
text-align: center;
padding: 50px;
background-image: url(‘/static/images/background_image.png’);
background-size: cover;
background-position: fixed;
}
h1 {
color: #007bff;
}
The site builds successfully, no errors in the log. The background image doesn’t load. I’ve included the index.html and the style.css along with the folder structure. There is likely something Render specific that I’m missing to allow the image to load appropriately, but so far my search hasn’t yielded anything specific to my issue.
Let me know if you need me to share anything else.