You will need to modify the sections indicated:
The style
attribute of the <body>
tag would need to contain a reference to an image (your logo), possibly with some dimensions (width and height percentages) so that it grows and shrinks.
The style
attribute of the orders
DIV needs to have the background
property removed, or changed to be transparent
, or changed to be a semi-transparent color (recommended) using an rgba()
value.
RGBA values are specified as rgba(red,green,blue,alpha)
, where red, green, blue are values ranging from 0 to 255 and alpha sets the transparency from 0
(completely transparent) to 1
(no transparency). Something like 0.5
for alpha to start, and adjust up or down until you get what you want.
<html>
<head>
<title>My Restaurant</title>
</head>
<body style="margin:0px; padding:0px; display:block; background:url(images/bg.jpg) no-repeat center center fixed; background-size:cover;">
<center>
<div style="width:99%; font-size:30px; position:absolute; top:0px; left:0px; background:red; color:#FFFFFF; margin:0px;">
Total: {TICKET TOTAL}
</div>
</center>
<div style="width:99%; margin:0px; margin-top:35px;"> </div>
<div id="orders" style="background:rgba(200,200,200,0.5); width:99%; margin:0px; font-size:16px; font-family:calibri;">{ORDERS}</div>
</body>
</html>
So you have this in the <body>
tag:
background:url(images/bg.jpg) no-repeat center center fixed; background-size:cover;
That ^ is a relative path to a JPG image. Create a folder called âimagesâ in the same path as your HTML file, and put an image file in that folder named âbg.jpgâ.
You have this in the orders
DIV:
background:rgba(200,200,200,0.5);
That ^ will give a near-white background color to the Order Lines, but with the alpha set to 0.5
you should be able to âsee throughâ it to the background image.
That should give you a starting point.