Background Images

Learn how to add and style background images with Refoundry, including size, position, no-repeat settings, and gradient overlays.

Last updated:

Description

In this tutorial, you’ll learn how to add a background image and linear gradient to a container in Refoundry and configure settings including size, position, and overlays.

This tutorial will cover:

  • Adding a background image to a container
  • Preventing background image repetition
  • Adjusting background image size
  • Controlling background image position and custom offsets
  • Adding a second background layer with a linear gradient
  • Changing gradient colors and angle direction
  • Adjusting gradient position percentages for color visibility

Suggested videos:

Image Block

Borders and Shadows

Related resources:

Image Backgrounds | Refoundry

Gradient Backgrounds | Refoundry

Relate Resources

Keep exploring.

Explore more resources we’ve selected to help you dig deeper into topics that matter to your workflow.

Ready to take the next step?

Put your learning into action.

Whether you’re exploring on your own or want guided support, Refoundry makes it easy to start building smarter today.