The Background group puts a photo, a video or a color behind a section's content. Most content sections have it, under the Layout group in the editor. Select a section in the editor's sidebar to see it. Add a background image or video to a section has the steps.
Background type
Choice
What the section shows
None
No background. The section sits on the page background. The default in most sections.
Image
The photo in Background image, behind the content.
Color
One flat color, chosen in Background color.
Video
A video you upload or link to, behind the content.
YouTube or Vimeo
A video from one of those sites, behind the content.
A photo or video is cropped to fill the section. The section is as tall as its content and its padding, so to show more of the photo, raise Padding top and Padding bottom in Section layout settings. The Hero and Video sections set their own height. The background covers the section's padding and stops at its margin.
There is no separate photo for phones, except Mobile image in the Hero section.
Photo and video
Setting
What it does
Background image
Shows with Image, Video and YouTube or Vimeo. With Image, it is the photo. With a video, it is the still image shown before the video plays, and in place of the video to visitors whose device is set to reduce motion. For an uploaded video, leave it empty to use the video's own preview image.
Background video
Shows with Video. A video you upload to Shopify.
Video file link
Shows with Video. A link to an MP4 file, used only when Background video is empty. For a file in Content > Files in your Shopify admin, copy its link there.
Video URL
Shows with YouTube or Vimeo. The video's address, such as https://www.youtube.com/watch?v= followed by the video's code, or https://vimeo.com/ followed by its number.
A background video plays muted, in a loop, with no controls, and visitors cannot click it. There is no setting for sound. To show a video with sound and a play button, use the play button in the Video section.
Until you choose a video or enter a link, the section shows Background image. A YouTube or Vimeo video is enlarged a little, so the player's own bars stay out of view and a thin strip at each edge of the video is cut off. My background video doesn't play covers a video that does not start.
In the Hero, Section and Video sections, Background parallax in the Motion group moves the photo or video a little slower than the page as customers scroll. It shows with Image and Video, and is on by default. A YouTube or Vimeo video does not move this way. In the Video section, the setting shows only when Scroll effect is None. Visitors whose device is set to reduce motion see the background still.
Color
Setting
What it does
Background color
Shows with Color. Surface, the default, and Surface, stronger are two light shades mixed from your page background and Surface tint in Color settings. They turn into dark shades in dark mode, the darker set of colors your store can show. Custom shows a color picker.
Color
Shows when Background color is Custom. The color stays the same in light and dark mode. The default is #f2efe9, an off-white.
On a dark custom color, the section's text and buttons switch to the colors they use in dark mode. On a light custom color, they keep their light mode colors, even when the rest of the store is in dark mode. Choose light, dark or automatic color mode explains dark mode.
Background width
Background width shows with every type except None. Inset, the default, leaves a narrow margin on both sides of the background and rounds its corners. Full runs the background to the edges of the screen with square corners.
Overlay and text color
Setting
What it does
Overlay opacity
Shows with Image, Video and YouTube or Vimeo. Darkens the photo or video with black, from 0% to 100% in steps of 5%. The default is 0%. Above 0%, the section's text and buttons switch to the colors they use in dark mode, so they stay readable.
Text color
Shows with Image, Video and YouTube or Vimeo, and with a Custom color. One color for all the section's text. Leave it empty to let the section choose its text colors as described on this page.
With a photo and Overlay opacity at 0%, the text keeps the page's own colors, which is dark text when the store is in light mode. On a dark photo, raise Overlay opacity or set Text color.
Sections with a background
These sections have the whole Background group: Blog posts, Comparison, Contact form, Custom Liquid, Facts, FAQ, Featured collection, Featured product, Features, Hero, Highlights, Orbit, Promo list, Section, Specifications, Steps, Subscription and Testimonials.
Three sections use it differently. The Hero section starts with Image, and adds Photo or video and Mobile image, which the Hero section article describes.
The Video section has no None and no Text color, and starts with Video and an Overlay opacity of 30%. There, Background image and Overlay opacity show for every type except Color, and the text over a photo or video is always light.
In the Hotspots section, the group holds only Background image and Background width. The photo is the picture the hotspot dots sit on, shown in the page rather than behind other content. Background width is hidden when Style is Product card beside image. The Hotspots section article has the details.
Card rail, Marquee, Photo wall, Stacking cards, Timeline and the page sections, such as Collection and Product information, have no Background group.
The Background group puts a photo, a video or a color behind a section's content. Most content sections have it, under the Layout group in the editor. Select a section in the editor's sidebar to see it. Add a background image or video to a section has the steps.
Background type
Choice
What the section shows
None
No background. The section sits on the page background. The default in most sections.
Image
The photo in Background image, behind the content.
Color
One flat color, chosen in Background color.
Video
A video you upload or link to, behind the content.
YouTube or Vimeo
A video from one of those sites, behind the content.
A photo or video is cropped to fill the section. The section is as tall as its content and its padding, so to show more of the photo, raise Padding top and Padding bottom in Section layout settings. The Hero and Video sections set their own height. The background covers the section's padding and stops at its margin.
There is no separate photo for phones, except Mobile image in the Hero section.
Photo and video
Setting
What it does
Background image
Shows with Image, Video and YouTube or Vimeo. With Image, it is the photo. With a video, it is the still image shown before the video plays, and in place of the video to visitors whose device is set to reduce motion. For an uploaded video, leave it empty to use the video's own preview image.
Background video
Shows with Video. A video you upload to Shopify.
Video file link
Shows with Video. A link to an MP4 file, used only when Background video is empty. For a file in Content > Files in your Shopify admin, copy its link there.
Video URL
Shows with YouTube or Vimeo. The video's address, such as
https://www.youtube.com/watch?v=followed by the video's code, orhttps://vimeo.com/followed by its number.A background video plays muted, in a loop, with no controls, and visitors cannot click it. There is no setting for sound. To show a video with sound and a play button, use the play button in the Video section.
Until you choose a video or enter a link, the section shows Background image. A YouTube or Vimeo video is enlarged a little, so the player's own bars stay out of view and a thin strip at each edge of the video is cut off. My background video doesn't play covers a video that does not start.
In the Hero, Section and Video sections, Background parallax in the Motion group moves the photo or video a little slower than the page as customers scroll. It shows with Image and Video, and is on by default. A YouTube or Vimeo video does not move this way. In the Video section, the setting shows only when Scroll effect is None. Visitors whose device is set to reduce motion see the background still.
Color
Setting
What it does
Background color
Shows with Color. Surface, the default, and Surface, stronger are two light shades mixed from your page background and Surface tint in Color settings. They turn into dark shades in dark mode, the darker set of colors your store can show. Custom shows a color picker.
Color
Shows when Background color is Custom. The color stays the same in light and dark mode. The default is
#f2efe9, an off-white.On a dark custom color, the section's text and buttons switch to the colors they use in dark mode. On a light custom color, they keep their light mode colors, even when the rest of the store is in dark mode. Choose light, dark or automatic color mode explains dark mode.
Background width
Background width shows with every type except None. Inset, the default, leaves a narrow margin on both sides of the background and rounds its corners. Full runs the background to the edges of the screen with square corners.
Overlay and text color
Setting
What it does
Overlay opacity
Shows with Image, Video and YouTube or Vimeo. Darkens the photo or video with black, from 0% to 100% in steps of 5%. The default is 0%. Above 0%, the section's text and buttons switch to the colors they use in dark mode, so they stay readable.
Text color
Shows with Image, Video and YouTube or Vimeo, and with a Custom color. One color for all the section's text. Leave it empty to let the section choose its text colors as described on this page.
With a photo and Overlay opacity at 0%, the text keeps the page's own colors, which is dark text when the store is in light mode. On a dark photo, raise Overlay opacity or set Text color.
Sections with a background
These sections have the whole Background group: Blog posts, Comparison, Contact form, Custom Liquid, Facts, FAQ, Featured collection, Featured product, Features, Hero, Highlights, Orbit, Promo list, Section, Specifications, Steps, Subscription and Testimonials.
Three sections use it differently. The Hero section starts with Image, and adds Photo or video and Mobile image, which the Hero section article describes.
The Video section has no None and no Text color, and starts with Video and an Overlay opacity of 30%. There, Background image and Overlay opacity show for every type except Color, and the text over a photo or video is always light.
In the Hotspots section, the group holds only Background image and Background width. The photo is the picture the hotspot dots sit on, shown in the page rather than behind other content. Background width is hidden when Style is Product card beside image. The Hotspots section article has the details.
Card rail, Marquee, Photo wall, Stacking cards, Timeline and the page sections, such as Collection and Product information, have no Background group.