All Collections
Menuboard Manager®
Content Manager
How to use a DIV to mask an on-screen zone
How to use a DIV to mask an on-screen zone

You can hide something with a div that is positioned over image or video

Marc Rosenberg avatar
Written by Marc Rosenberg
Updated over a week ago

You can utilize a <div> to hide an element on screen by positioning it in front of the background image. In Menuboard Manager, go to the HTML tab and paste this line of code into the code editor.

<div style="height: 100px; width: 100px; background-color:#000000; position: absolute; left: 200px; top: 200px;"></div>.

The background-color in the code example is Black. Change the hex valut to match the background color of the image and this will appear as a mask over the background. This webpage shows all colors and their RGB hex value which must be input into the "background-color:XXXXXX;" section of the line.

The position of the DIV must also be set to align with the item or items that you wish to hide. The style="height: 100px; width: 100px; section of the line is how big the mask that will be created is, and position: absolute; left: 200px; top: 200px; is where this mask will appear on the image. Adjust the px numbers to change the size and position of DIV.

Did this answer your question?