Nazmie Razali asked 6 years ago
Hi, can I know how to insert a picture as background image in my web server? I tried using the code as below, but it seem incorrect.
client.println(“<style>body {background-image: url(“almonds.jpg”); text-align: center; font-family: \”Trebuchet MS\”, Arial;}”);
Rui Santos Staff answered 6 years ago
Hello Nazmie, there are two things wrong with your example.
First, you need to escape the character ” in your Arduino code, otherwise it will not work and give you an error. For example:
background-image: url("almonds.jpg")
It needs to be with an \ before the “ :
background-image: url(\"almonds.jpg\")
However, that HTML will never load that figure, because the figure is not stored in your ESP32 (I don’t have any examples on that subject…).
Basically, you need to host your image in an online service or in your own website.
Then, enter the URL in that part. It would look like this:
client.println("<style>body {background-image: url(\"http://example.com/your-image-url.jpg\"); text-align: center; font-family: \"Trebuchet MS\", Arial;}");
I hope that helps!
Steen Spaten answered 3 years ago
Regarding the background picture: How to display it in the html-page? I can upload a image (a png-image just like your favicon into SPIFFS from your WEB-server projects), but I can’t figure out how to insert it in CSS and hmtl. Can you help?
Sara Santos Staff answered 3 years ago
Hi.
Check this tutorial: https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/
It explains how the ESP32 can serve images.
You can also take a look at this: https://www.w3schools.com/cssref/pr_background-image.asp
It explains how to set a background image.
In CSS, I think you can use:
background-image: url("image");
Then, make sure you listen for the /image request and serve the image accordingly.
server.on("/image", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/sun.png", "image/png");
});
Regards,
Sara