This probably comes down to knowing CSS, but is it possible to edit a theme and have an image as the background? We occasionally have "themes", like we will for mothers day. They come with some lower thirds graphics. I'd love to change the background to an image. Thanks in advance!
(I run the tech at our small church but a lot of this is very new to me, so bear with me!)
I can't seem to find the folder to put the image in that CSS would pull from. It might not be possible with this plugin. If not, that's fine too! I tried to load the HTML for the dock in my browser and edit it that way. I was able to see the folders and the CSS, JS, and HTML scripts but couldn't add the image. Thanks in advance!
Hi!
It is possible to use a background image for a theme instead of a color, and a couple of our themes in our theme packs even made use of this. However, this is complicated, and it requires decent knowledge of CSS as well as trial and error to make it look right.
I'll help as best as I can, but keep in mind that a lot of stuff around images are contextual, which means that not everything I write may apply to your case.
First, it looks like you are having trouble referencing the image within your CSS. Unfortunately, as you noted, linking images will not work due to technical limitations (that would require a server). Instead, you will need to embed your image as a data URL. This is also the same technique we use in our theme packs.
So what you want to do is to first convert your image file to a long string of Base64 text. There are many online tools that can do this; here is one example:
https://dopiaza.org/tools/datauri/index.php
Here is an example of the first few characters of a converted PNG image (the three dots represent the rest of the very long image):
data:image/png;base64,...
The good news is that you can copy the data URL and paste it directly into your CSS, though you will need to wrap it in the
url() function. For example:
background-image: url("data:image/png;base64,...");
As for editing process, you can use the embedded theme editor. While editing the CSS, you can always hit
Ctrl + S to save and immediately apply your edits to the browser source, which should make iterating through your design easier. But feel free to use whatever works for you!
Feel free to ask me if you have any other questions. Thanks for your support and patience!
Regards,
Jon from Firstfruits Studio
Primary (and only) Developer
