[CSS: Background] Background Color, Image, Position, Size, Repeat, Attachment & Shorthand — Documentation #88

This sub-issue covers the entire Background module of CSS. Contributors will document all properties used to style backgrounds, including colors, images, gradients, positioning, sizing, and scrolling behavior.

This issue includes the following files:

background
├── background-color.mdx
├── background-image.mdx
├── background-gradient.mdx
├── background-position.mdx
├── background-size.mdx
├── background-repeat.mdx
├── background-attachment.mdx
└── background-shorthand.mdx

Each MDX file should include:

• Property explanation
• Syntax
• Examples
• Best practices
• Visual examples
• Common mistakes
• Real UI examples (hero sections, cards, banners)

Tasks

Basic Background Properties

• Document background-color
• Document background-image
• Document background-gradient
• Document background-position
• Document background-size
• Document background-repeat
• Document background-attachment
• Document background-shorthand

General Tasks

• Add examples for fixed vs scroll attachment
• Add examples showing cover vs contain
• Provide gradient examples (linear, radial)
• Include visuals for repeating patterns
• Add UI/UX examples (hero banner, card overlay, sections)
• Ensure proper MDX formatting for Docusaurus
• Add cross-links to Colors, Layout, Box Model, and Effects

Suggested Structure for Each File

• Introduction
• Syntax
• Examples
• Best practices
• Common mistakes
• Real-world usage
• Browser behavior notes
• Related topics

Expected Outcome

A complete background styling guide that teaches learners how to use CSS to create visually appealing sections, hero backgrounds, banners, UI blocks, and more.