Full background image - Vercel OG Image template

Create a new API endpoint:

// pages/api/og/full-bg-image.jsx

import React from "react";
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url);

    // dynamic params
    const title = searchParams.has("title")
      ? searchParams.get("title")?.slice(0, 100)
      : "My default title";

    const image =
      searchParams.get("image") || "https://picsum.photos/seed/picsum/1200/627";

    return new ImageResponse(
        <div tw="h-full w-full flex items-start justify-start bg-white">
          <div tw="flex items-start justify-start h-full">
              style={{ objectFit: "cover" }}
              tw="absolute inset-0 w-full h-full"
            <div tw="bg-black absolute inset-0 bg-opacity-60"></div>
            <div tw="flex items-center justify-center w-full h-full relative">
              <div tw="text-[80px] text-white font-black text-center mx-20">
        width: 1200,
        height: 627,
  } catch (e) {
    return new Response(`Failed to generate the image`, {
      status: 500,

You can then create new dynamic images by passing the following parameters to the API endpoint:

const title = "Breaking: Vercel just surpassed Apple in market cap";
const image = "https://picsum.photos/seed/picsum/1200/627";

return <img src={`/api/og/full-bg-image?title=${title}&image=${image}`} />;

// or

return (
Currently, passing imgix/unsplash images as a parameter can be a bit tricky. You should amend the URL before passing it to the endpoint. For example, this URL https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80 should be amended to https://images.unsplash.com/photo-1476820865390-c52aeebb9891?w=1770&q=80&fm=png
  • Remove auto=format, fit=crop, ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8, ixlib=rb-1.2.1 param
  • Add fm=png params
When passing images via the url parameters, make sure that they are not over ~400 KB in size, due to limitations of Vercel's edge functions.
If you are storing images locally within your codebase, you can get around the 1MB limitation of Vercel's edge function by referencing the image locally. You can store the image in the /public and use src={process.env.VERCEL_URL/image.jpg} within your API endpoint.

If you want to use your own custom fonts for this template, follow this example.
More Vercel OG templates

Receive an email when we publish a new template

Max 1-2x times per month.