Using Images with CSS

CSS properties for working with images.

Background Images

Background Image
Fixed Background Image
Background Image Cover
Background Image Contain
Background Image Non-repeating
Background Image: Positioned to Bottom Right
Background Image Resized

Gradients

Example gradients

Linear Gradient

Linear Gradient at 90°

Linear Gradient at 90° with set points

Linear Gradient with multiple colors

Radial Gradient

Radial Gradient with a transparent color

Radial Gradient with a transparent color and set points

Radial Gradient set to circle with a transparent color and set points

Conic Gradient

Conic Gradient

Conic Gradient with multiple colors

Image Styles

Responsive Image Styles

Images need a little help to properly be responsive.

img {
  height: auto;
  max-width: 100%;
}

This code makes it so that your images will shrink to fit the available space, but won’t expand larger than the image’s actual size, which would cause blurring issues.

Object fit works much like background-size, with values like cover and contain.