Ok, so your making a from scratch project. My guess is that you have multiple image files that you are loading. And you've mentioned backgrounds, so perhaps each background is a separate image? My advice is that you put all of your images together as 1 huge sprite sheet.
And then using 'blitting' to copy from that sprite sheet onto your games canvas.
[ This is how to copy from a section of the source, to a section in the canvas:
canvas.context.drawImage(source, from x, from y, from w, from h, to x, to y, to w, to h) ]
Using drawImage you would copy each background from the sprite sheet onto the display canvas element. So instead of loading a new background you would be drawing from 1 sprite sheet that is fully loaded before the game starts.
You should never have more than 1 or 2 canvas elements in the DOM. For better performance you should use 1 loaded sprite sheet and off screen canvas elements that you draw from onto a single displayed canvas.
If you have static (non-animated) html div elements that need a background, another option is to bake the backgrounds into the css of the div by using a base64 data string of the image as the css background url.