Skip to content
Twilight React Playground
ثيم رائدaren

ParallaxBackground

componentBeginnerserverbrowserlive demo

A full-width picture behind a centered title and an optional call-to-action link, with an optional dark overlay.

import { ParallaxBackground } from '@salla.sa/twilight-theme-engine/components/home';

In plain words

A wide band with a picture in the background, a title in the middle and a button such as "Shop now". Turn on is_opacity to darken the picture so white text stays readable.

Signature

const ParallaxBackground: React.MemoExoticComponent<(props: {
  data: {
    image: { url?: string };
    title?: string;
    url?: string;
    link_text?: string;
    is_opacity?: boolean;   // false
    [key: string]: unknown;
  };
}) => JSX.Element | null>

Try it live

A full-width picture behind a title and a call-to-action link. The picture is a real product image from this store.Try this: clear link_text or url: the button needs both, so it disappears.
Storefront canvas · en · LTR

Loading an image…

Controls
is_opacityDarkens the picture so the text reads.
What a theme writes
import { ParallaxBackground } from '@salla.sa/twilight-theme-engine/components/home';

export function SummerHero() {
  return (
    <ParallaxBackground
      data={{
        image: { url: 'https://cdn.example.com/summer.jpg' },
        title: 'The summer collection',
        url: '/offers',
        link_text: 'Shop now',
        is_opacity: true,
      }}
    />
  );
}

Example

app/components/home/SummerHero.tsx
import { ParallaxBackground } from '@salla.sa/twilight-theme-engine/components/home';

export function SummerHero() {
  return (
    <ParallaxBackground
      data={{
        image: { url: 'https://cdn.example.com/summer.webp' },
        title: 'The summer collection',
        url: '/offers',
        link_text: 'Shop now',
        is_opacity: true,
      }}
    />
  );
}

How it behaves

  • Markup: .full-banner-entry with the picture as an inline background-image, an overlay (bg-black only with is_opacity), and an <h2> title. The link is the engine Link.

  • The parallax effect itself comes from the theme's CSS for .full-banner-entry, not from the component.

Gotchas

  • The link renders only when both url and link_text are set.

  • Without image.url the block renders nothing, title included. The picture is a CSS background, so it has no alt text and is not lazy-loaded.

Related

FixedBanner

A single linked banner image, with a smaller image for phones and an eager-loading option for a banner at the top.

SquarePhotos

Square picture tiles that link somewhere, with optional text over each: one row up to three tiles, a three-column grid beyond.

Source and docs