nginx custom error page 502 with css and image files

Question

I\'m trying to add a custom error page for 503. I added these lines to server conf in nginx.conf file:

error_page 500 502 503 504 /50x.html;
location = /50x.h         


        

Answer 1

I think the best approach is to do the following things:

• Use inline CSS
• Convert your images to Base64

After doing this, you can embed the generated Base64 string into the background-image CSS rule as follows:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==)

You can use the string with the tags as well, just pass it to the src attribute as follows:

This way you can keep the internal nginx rule.