Ethernet shield background image for webpage

Projects Programming
1

Hi all,

I am working on a project that monitors my school's greenhouse. I want the webpage to have a background that is of an image. I have partly achieved this as the image is copied enough to fill the screen. I want the image to be stretched so that it fills the page. No matter what I code, it still multiplies itself.

I am using an Ethernet shield atop of an Arduino Uno. Here is the line of code that I am using to insert the background image:

 client.println("<BODY style=\"background-image:url('https://theselfsufficientliving.com/wp-content/uploads/2013/10/medinal-plants-gardenening-640x3601.jpg');\"\"background-repeat:no-repeat;\">");
2

This might get you started:

<html>
<style>
body {
  background-image: url('https://theselfsufficientliving.com/wp-content/uploads/2013/10/medinal-plants-gardenening-640x3601.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%r" and the background image will be stretched to cover the entire element, in this case the BODY element.</p>
</body>
</html>

If you copy it into a .html file and look at in a browser, it appears to do what you want.
I found it here and adapted it for your picture: HTML Background Images

Maybe you can make it smaller.

Incidentally, in order to avoid a whole lot of escape characters in a such a string, you can use the C++ raw string literal. See, for example: abseil / Tip of the Week #64: Raw String Literals

3

"Incidentally, in order to avoid a whole lot of escape characters in a such a string, you can use the C++ raw string literal. See, for example: abseil / Tip of the Week #64: Raw String Literals"

I've found with html you can substitute the ' single quote for the " double quote and escaping is not required.

4

zoomkat:
"Incidentally, in order to avoid a whole lot of escape characters in a such a string, you can use the C++ raw string literal. See, for example: abseil / Tip of the Week #64: Raw String Literals"

I've found with html you can substitute the ' single quote for the " double quote and escaping is not required.

Yeah this HTML embedded in Arduino IDE is confusing the hell out of me a little bit.

5

"Yeah this HTML embedded in Arduino IDE is confusing the hell out of me a little bit."

One more thing that can help memory issues and possibly quicker upload time is to bundle the code in an F() macro that is sent in a single client.print operation like below.

client.print(F(  //start F() macro
"HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n"
"<HTML>"
"<HEAD>"
"<meta name='apple-mobile-web-app-capable' content='yes' />"
"<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />"
"<TITLE>JAVA Page</TITLE>"
"</HEAD>"
"<BODY>"
"<H1>JAVA</H1>"
"<hr />"
"
"
"<FORM ACTION='/' method=get >"
"Enter Code: <INPUT TYPE=TEXT NAME='LED' VALUE='' SIZE='25' MAXLENGTH='50'>
"
"
"
"<input type=submit value='5 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='5 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"<input type=submit value='6 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='6 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"<input type=submit value='7 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='7 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"<input type=submit value='8 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='8 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"</FORM>"
"</BODY>"
"</HTML>"
));   //end F() macro