Skip to content

Conversation

@Takshil-Kunadia
Copy link
Contributor

@Takshil-Kunadia Takshil-Kunadia commented Dec 31, 2025

What?

Closes #52585

This PR adds "Fixed background" (parallax effect) support for video backgrounds in the Cover block, similar to the existing functionality available for image backgrounds.

Why?

Currently, the Cover block allows setting an image background to be "Fixed" - so the image remains in place while the content scrolls over the top (parallax effect). However, this option was not available for video backgrounds.

Users have requested the ability to use the same parallax/fixed effect with video backgrounds to create more engaging visual experiences.

How?

  1. Extended the "Fixed background" toggle to also show when a video background is selected (previously only shown for images).
  2. Since videos don't support background-attachment: fixed like images do, the parallax effect for videos is achieved using:
    • position: fixed on the video element to fix it relative to the viewport
    • clip-path: inset(0) on the Cover block container to create a clipping context that constrains the fixed video within the block's bounds

Testing Instructions

Testing Instructions for Keyboard

  1. Open a post or page in the editor.
  2. Insert a Cover block.
  3. Add a video as the background (click "Upload" or "Media Library" and select a video file).
  4. In the block settings sidebar under "Settings", toggle on "Fixed background".
  5. Add some content inside the Cover block.
  6. Add more blocks above and below the Cover block to enable scrolling.
  7. Preview the page and scroll - the video should remain fixed while the content scrolls over it.
  8. Verify that the video stays within the Cover block bounds and doesn't overflow.

Screenshots or screencast

Before(No support for parallax):-

Screen.Recording.2025-12-31.at.5.15.54.PM.mov

After:-

Screen.Recording.2025-12-31.at.5.16.26.PM.mov

@github-actions github-actions bot added the [Package] Block library /packages/block-library label Dec 31, 2025
@Takshil-Kunadia Takshil-Kunadia marked this pull request as ready for review December 31, 2025 13:03
@github-actions
Copy link

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

1 similar comment
@github-actions
Copy link

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @CarlyOvers, @nyanbeans.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: CarlyOvers, nyanbeans.

Co-authored-by: Takshil-Kunadia <[email protected]>
Co-authored-by: annezazu <[email protected]>
Co-authored-by: jordesign <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Block library /packages/block-library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Cover Block: Allow Video backgrounds to be 'Fixed'

1 participant