Colors & Backgrounds Practice

Assignment 2 — implement colors, gradients and background images using CSS

Solid Color Card

Solid Color

Use a solid background color here. Make text readable and add padding.

Learn more

Linear Gradient Card

Linear Gradient

Create a linear gradient with at least two color stops and some padding.

Explore

Radial Gradient Card

Radial Gradient

Use a radial gradient and ensure the text stays readable (use overlay if needed).

Try

Background Image Demo

Background Image

Add a background image (use the sample image URL below) and apply repeat-x, position and size rules.

Sample image (use as placeholder): http://codinggita.com/wp-content/uploads/placeholder-800x400.png

cover

contain

Parallax / Fixed Attachment Demo

Fixed background (parallax demo)

On some browsers this creates a parallax effect. Note: behavior differs on mobile.