w3c / w3c/csswg-drafts

Proposal for a background-video property

Open
#6,732 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-images-5
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

Has any serious consideration yet been given to adding a CSS background-video property?

There are already tons of articles explaining how to reposition the <video> tag for this. Since folks are doing it anyway seems that CSS background-video could save developers some work. Could also help discourage the use of bloated animated image types for this?

Seperation of concerns thinking would go: HTML for content video and CSS for background video. We have html and css background-image why not and css background-video?

I vaguely remember something about Safari considering allowing the use of video formats in background-image and treating them like animated GIFs by default (muted with auto repeat). But wouldn't there be special consideration for video that would require a separate background-video property (like playback speed, etc)?

background-video like background-image would need to work with (where possible) existing background- properties (-size, -position, etc..).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the proposal and its comparison with , background-image, and existing background-* properties. Determine whether background-video needs separate semantics for playback and repetition, and what a complete CSS property definition would need to specify.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.