CSS - Basic CSS Part 4

May 29, 2026 3:00pm UTC (Check your timezone)

Theory Lab Review Quiz

Instructors: Jess, Carmen, and Eda

Basic CSS

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Working with Backgrounds and Borders: How Do Background Image Size, Repeat, Position, and Attachment Work?

The background-image property sets a background for the specified element.

1div {
2  background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
3}

We can adjust the size of the background image with the background-size property. The possible values are:

We can also control how the image is repeated, using the background-repeat property. The possible values are:

The position of the background image can also be controlled by the background-position property. We can use keywords like top, bottom, left, right, and center, or pixel or percentage values.

To set the scroll behavior of the background image in relation to content, we can use the background-attachment property. The possible values are:

We can use the shorthand background property. For example, to set the background-image, background-position, and background-attachment all in one go, we can do this:

1body {
2  background: center top fixed
3    url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
4}

Working with Backgrounds and Borders: What Is a Background Gradient, and How Does It Work?

A gradient is a progressive transition between two or more colors. In CSS, there are two types:

A linear gradient transitions colors along a straight line.

1background: linear-gradient(<direction>, <color-stop1>, <color-stop2>, ...);

<direction> can be an angle (for example, 45deg), keyword (to right, to bottom, etc.) or a side/corner.

<color-stop1>, <color-stop2>, … define the colors where transitions occur.

A radial gradient transitions colors from an origin outward in a circular shape.

1background: radial-gradient(<shape> <size> at <position>, <color-stop1>, <color-stop2>, ...)

<shape> can be either circle or ellipse.

<size> is the size of the gradient’s ending shape and can be one of closest-side, closest-corner, farthest-side or farthest-corner.

<position> is the position of the gradient’s center and can be defined using keywords (center, top left, bottom right, etc.) or values (such as 50% 50%, 10px 20px).

<color-stop1>, <color-stop2>, … again, define the colors where transitions occur.

Working with Backgrounds and Borders: What Are Some Accessibility Considerations for Backgrounds?

We should always keep accessibility in mind when working with backgrounds. Some things to consider are:

The recommended minimum contrast ratio by The Web Content Accessibility Guidelines (WCAG) is 4.5:1 for normal text and 3:1 for large text.

You can use the WAIM Contrast Checker to check for the contrast ratio between a background and a text color.

For example, displaying an error message in red color only is not the best choice; we can also add an icon or use bold text to indicate the error.

Background audio and auto-playing videos can be distracting and should be given control elements to make sure users can control their behavior.

Working with Backgrounds and Borders: What Are the Different Ways You Can Add Borders Around Images?

We can add borders to elements using the border property. It’s a shorthand for the border-width, border-style, and border-color.

1img {
2  border: 2px dashed purple;
3}

The outline property can also be used to define an outline for the element. It’s also a shorthand for outline-width, outline-style, outline-color.

1img {
2  outline: 3px solid gold;
3}

If the border is already defined, we can also specify the border-radius, which can be used to create rounded corners of the border.

1img {
2  border: 2px solid black;
3  border-radius: 10px;
4}

Design a Blog Post Card

We’ll take a look at this exercise and practice styling backgrounds and borders!

Here are the topics we’ve explored in this section: