Or, if you’re winding down after a long week, choose a fun and quirky background that will allow your team to unwind and connect. Looking to keep your next meeting on track? Canva allows you to easily write meeting minutes, add an agenda list, or even an infographic and add it to your Zoom background. Simply choose a Zoom boardroom or office background and easily incorporate your company logo, fonts, and color palette with a few simple clicks. Want to show your colleagues and clients that you mean business? With Canva, you can take a messy home and turn it into an office space that oozes professionalism-no cleaning required. Ooze professionalism from wherever you are The virtual background feature in the Zoom app allows you to use an image or video as your background. From there you can easily access the Zoom virtual background option and add in your bespoke background. Quick Tutorial: How to Install a Custom Zoom Background. Select Settings, and ensure the virtual background option is turned on. To add your new background to Zoom, simply sign in to Zoom Desktop Client. Then the child can fill the parent using width: 100% and height: 100%, as well as set the background image, ensuring it scales to cover the area.Easily integrate your background with Zoom The structure being: įirst we specify the dimensions for the parent element.

Rather than an, I used an additional inside the parent to act as the image. (CSS animations benefit from hardware acceleration and as a result appear smoother than other methods of animating.) In order to achieve optimal performance, I decided to use the CSS transform property to handle the enlargement of the image. In my situation, I wanted to manage the effect entirely in CSS, so I went for that. There could be some potential benefits here, like being able to set the source with srcset so that the image used is performance and device-appropriate. This one wasn’t quite the effect I was after, and certainly not very lightweight.Īnother option was to position an within the container and manipulate it with CSS. For that, launch the Zoom app and click on your name initials at the top-right corner. There are many different possible methodsĪs I had never created an effect like this before, I began to take a look at different ways of doing this and came across a number of different methods. Method 1: Add Picture Before Joining a Meeting.

This type of effect is notably used in portfolio-type situations where the design intends to show both visual and informational details.

Containers with background images which zoom within their container on hover, revealing more information. Whilst working on a client’s website recently, I was asked to replicate an effect like this. The following is a guest post by Dylan Winn-Brown, who shows us a performant way to accomplish this design effect.

Background image zoom