Skip to main content

Flickering when using background-image

The following code is discouraged in Remotion:

❌ Don't do this
tsx
const myMarkup = (
  <div
    style={{
      backgroundImage: `url(${src})`,
    }}
  >
    <p>Hello World</p>
  </div>
);
❌ Don't do this
tsx
const myMarkup = (
  <div
    style={{
      backgroundImage: `url(${src})`,
    }}
  >
    <p>Hello World</p>
  </div>
);

Problem​

Remotion has no way of knowing when the image is finished loading because it is impossible to determine so when loading an image through background-image. This will lead to Remotion not waiting for the image to be loaded during rendering and cause visible flickers.

Solution​

Use the <Img> tag instead and place it in an <AbsoluteFill>:

✅ Do this
tsx
import { AbsoluteFill, Img } from "remotion";
 
const myMarkup = (
  <AbsoluteFill>
    <AbsoluteFill>
      <Img
        style={{
          width: "100%",
        }}
        src={src}
      />
    </AbsoluteFill>
    <AbsoluteFill>
      <p>Hello World</p>
    </AbsoluteFill>
  </AbsoluteFill>
);
✅ Do this
tsx
import { AbsoluteFill, Img } from "remotion";
 
const myMarkup = (
  <AbsoluteFill>
    <AbsoluteFill>
      <Img
        style={{
          width: "100%",
        }}
        src={src}
      />
    </AbsoluteFill>
    <AbsoluteFill>
      <p>Hello World</p>
    </AbsoluteFill>
  </AbsoluteFill>
);

See also​