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">
            <img
              style={{ objectFit: "cover" }}
              tw="absolute inset-0 w-full h-full"
              src={image}
            />
            <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">
                {title}
              </div>
            </div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 627,
      }
    );
  } catch (e) {
    console.log(`${e.message}`);
    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 (
  <meta
    property="og:image"
    content={`www.yourdomain.com/api/og/full-bg-image?title=${title}&image=${image}`}
  />
);