Clock and background not working together

[yeliabh]

Okay so I don't really know how to code but I'm trying to create a clock face for my fitbit versa and I'm having some trouble. The code I have either lets me have an image or a clock, somehow both don't work at the same time. I have no idea what to put under index.gui this is what I have so far 

<svg class="background">
<text id="myLabel" />
</svg>
<svg>
<svg>
<image href="background.jpg" />
<text id="background"></text>
</svg>
<image id="background" href="background.png" width="100%" height="100%"/>

That's what I've gotten from the fitbit guide but it's not working. I also cant seem to change the anchor point of the clock, its either in the middle or just off to the right, and I want it bottom right corner. Any help will be greatly appreciated!

[Gondwana]

You should only have one top-level <svg> element. You can embed multiple other elements within that (including other SVGs), but you won't need to use additional SVGs to do what you want.

[yeliabh]

Now I have a background but not clock. This is the part I don't understand, because to get one the other always disappears. 

[Gondwana · Accepted solution]

You only need one top-level SVG for what you're trying to do, so start with <svg> and end with </svg>. Stick all your other elements between those tags. Elements appearing later in the .gui file will appear over the top of elements higher in the file, so make sure your background image is at the top (probably just below the <svg>.

[yeliabh]

Thank you so much!! Putting the background at the top and deleting the extra <svg> fixed everything.