Restaurant cover hero with a full-width photo background, dark overlay, Book a table and View the menu buttons and an opening hours row, built only with core blocks.
Also known as: restaurant hero section, cover block hero, full width image hero, hero with background image, restaurant homepage banner
A full-width cover hero with a photo background for restaurants, built as a WordPress block pattern with the core Cover block. A warm dining photo sits under a dark overlay, with a headline, a short welcome text, Book a table and View the menu buttons and a row with opening hours, address and reservation details. It works as a restaurant homepage banner or a hero with a background image for any hospitality site.
How it works
The Cover block is full width with a minimum height of 760px, a custom overlay color (#1f140e at 75% opacity) and a 1160px constrained content width. A Group with a 660px content width, justified left, holds the uppercase eyebrow, the H1, the paragraph and the Buttons block. Below, a second Group places a wide Separator above a three-column Columns block; each column has a small uppercase label and a detail line. On phones the columns stack and the headline scales down automatically.
Use cases
Restaurants and bistros: the first screen shows the mood, the booking button and today's hours
Wine bars and cafés: replace the photo and labels to show happy hour and location
Hotel restaurants: pair the hero with a menu section further down the page
Catering and event venues: swap the buttons for "Request a quote" and "See packages"
How to use it
Copy the block markup.
Paste it into an empty paragraph in the block editor.
Replace the photo, the texts and the button links with your own.
Customization
Background photo: select the Cover block and use Replace in the toolbar to upload your own image.
Overlay: Cover block > Overlay color #1f140e and Overlay opacity 75; lower the opacity for a brighter photo, but keep text readable.
Headline: H1 with Typography > Font size 64px, weight 600 and Color > Text #fbf3e6 (cream).
Accent color: the eyebrow and the column labels use Color > Text #e9a27c; the Book a table button uses Color > Background #c2562e (terracotta).
Outline button: View the menu has a transparent background and Border 1px #fbf3e6.
Info row: edit the three Columns, or delete one column for a two-item row; the Separator color is #fbf3e6 at 20% alpha.
The photo comes from Unsplash; replace it with photos of your own dishes or dining room.
Accessibility
The background image is decorative (empty alt), so screen readers go straight to the heading. Cream text on the 75% dark overlay keeps strong contrast across the photo. The heading is a real H1, the info labels are plain text in reading order, and both buttons are keyboard-focusable links.
Full-Width Cover Hero with Photo Background at a glance
Can I use the Full-Width Cover Hero with Photo Background code for free?
Yes. You can copy or download the block markup and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.
How do I add it to my WordPress site?
Copy the block markup, open a page in the block editor, click into an empty paragraph and paste. WordPress turns it into regular blocks that you can edit like any other content. You can also paste it in the Code editor view (Options menu > Code editor).
Does it need a page builder or plugin?
No. The pattern is built only from core blocks such as Group, Columns, Heading, Image and Buttons, so it works without Elementor, Spectra, Kadence or any other plugin. Colors and spacing are set on the blocks themselves; headings and text use your theme's fonts.
Will it look the same in my theme?
The layout, colors and spacing come with the blocks, so they carry over. Fonts, link styles and the content width follow your theme, so small differences are normal. The live demo shows the pattern in the default Twenty Twenty-Five theme. It works best with block themes; in classic themes the block editor still renders it, with your theme's styles.
Does it work on mobile?
Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.
How to install
Copy the block markup above.
Open a page or post in the WordPress block editor, click into an empty paragraph and paste. The editor turns the markup into blocks.
Replace the sample text and images. To reuse it, select the blocks and choose Create pattern from the block toolbar menu.
Uses only core WordPress blocks, so no plugin is needed. Tested with WordPress 6.8 and later. Fonts come from your theme; the live demo uses the default Twenty Twenty-Five theme. WebDevSnippets is not affiliated with or endorsed by the WordPress Foundation.
Full-Width Cover Hero with Photo Background · WordPress Hero Sections
Pure CSS split hero with headline, buttons and stats beside a full-height photo cut on a diagonal with clip-path, plus an accent stripe and rating badge.
Centered SaaS hero section for the block editor with a headline, two buttons and a framed product dashboard screenshot, ready to paste as a Gutenberg pattern.
Bootstrap 5 hero section with a serif headline, call-to-action buttons and stats on the left and a five-photo collage grid with a floating card on the right.
