CSS Background Image: Quick Tutorial and 3 Automation Tips

The background-image property in CSS allows you to set an image as the background for any HTML element. This property can add a single image or multiple images or even create an image gradient as the background.

In CSS, you can control the position of the background image, whether or not the image should be repeated, the scrolling behavior of the image, and much more. Let’s look deeper into the syntax to understand how you can manipulate the CSS background image property to our advantage.

This is part of a series of articles about CSS Image

In this article:

• Background Image Syntax in CSS
• Working with CSS Background Images
  • Set Background Position
  • Background Image Repeat
  • Multiple Backgrounds
  • Resizing and Attachment of Background Image
  • Background Gradients
  • Using Transparency
• 3 Tips for Automating Background Images
  • Limit Images to Specific Dimensions
  • Crop Images with Auto Gravity
  • Expand Images with AI-Powered Generative Fill

Background Image Syntax in CSS

The generic syntax of the CSS background-image property is:

background-image: url('path_to_your_image');

With this syntax, the ‘url()‘ function specifies the path to the image. The image path can either be an absolute path or a relative path.

With this syntax, the ‘url()‘ function specifies the path to the image. The image path can either be an absolute path or a relative path.

The CSS background-image property also allows you to specify multiple images as backgrounds layered on top of each other. The syntax for multiple images is:

background-image: url('path_to_first_image'), url('path_to_second_image');

In this, each image is separated by a comma. The first image in the list is the topmost layer, and the rest of the images follow in the order specified.

Working with CSS Background Images

Set Background Position

The background-position property in CSS allows you to position a background image exactly where you want it. It can take two values representing the horizontal and vertical positions, respectively. For instance, background-position: center center; will position the background image in the middle of the container.

body {
  background-image: url('image.jpg');
  background-position: center center;
}

In the example above, the background image is vertically and horizontally centered. You can also use keywords like top, bottom, left, and right to position the image or specific measurements like pixels or percentages.

Background Image Repeat

The background-repeat property is one of the most commonly used properties when working with CSS background images. A background image will repeat itself horizontally and vertically by default to fill the entire container. However, this may not always be the effect you’re looking for.

body {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
}

In this example, our background image isn’t repeated. Setting the background-repeat property to no-repeat prevents the image from repeating itself. Other possible values for this property include repeat-x (repeat horizontally), repeat-y (repeat vertically), or repeat (repeat in both directions).

Multiple Backgrounds

CSS allows you to add multiple background images to a single element. This can be achieved by specifying each background image in the background-image property, separated by a comma. The first image in the list will be the one closest to the viewer, and the last one will be the furthest.

body {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-position: center, top;
  background-repeat: no-repeat;
}

In this example, image1.jpg will be positioned at the element’s center and will not be repeated. image2.jpg will be placed at the top and will repeat itself to fill the remaining space of the component. This feature can be useful when creating complex designs or effects.

Resizing and Attachment of Background Image

The background-size property in CSS allows you to control the size of the background image. It can take values like cover (which resizes the background image to cover the entire container), contain (which resizes the image to the largest size such that its width and height can fit inside the area), or specific dimensions.

body {
  background-image: url('image.jpg');
  background-size: cover;
}

You can also control whether a background image scrolls with the rest of the page or is fixed with the background-attachment property. For instance, background-attachment: fixed; will create a “parallax” effect where the background image does not move with the rest of the page.

Learn more in our guide to stretching background images

Background Gradients

Another feature of CSS background images is the ability to create gradients, a smooth transition between two or more colors. CSS offers three types:

• Linear – Colors shift from one to another based on the direction (up, down, left, right, or diagonally).
• Radial – A central point is defined, where the colors will shift outwards from that point.
• Conic – They still share a central point, but colors are rotated around that point instead of shifting outwards.

body {
  background-image: linear-gradient(red, yellow);
}

In this example, our background image will be a gradient transitioning from red to yellow. You can also create radial gradients with the radial-gradient() function or combine multiple gradients for more complex effects.

Using Transparency

The opacity of a background image can be controlled with the background-color property in conjunction with RGBA color values. An RGBA color value includes the red, green, and blue components and an alpha component representing transparency.

body {
  background-image: url('image.jpg');
  background-color: rgba(255, 255, 255, 0.5);
}

In the example above, a white (255, 255, 255) semi-transparent (0.5) background color is applied on top of the background image. This can be useful when you want to overlay text or other content on top of a background image and ensure it’s still readable.

3 Tips for Automating Background Images

When using background images, it can be difficult to manually rescale and crop them, especially in a responsive design. With Cloudinary, you can completely automate the process and even expand images by filling in the missing details with generative AI.

Cloudinary is a cloud-based media management service with a generous free plan, simplifying working with images and videos. It allows users to perform various operations on their media files, including resizing, cropping, and optimization, through a simple URL-based system or via SDKs for all popular programming languages.

URL parameters are the key-value pairs included in the URL that instruct Cloudinary on how to manipulate and deliver the requested image or video. Using these parameters, you can easily apply a wide range of transformations to your files without needing manual intervention or additional server-side processing.

A major advantage of using Cloudinary for image resizing is that the service dynamically resizes images on the server side before they are delivered to users, solving the problems of CSS-based resizing.

Let’s see how to effortlessly resize and rescale background images with Cloudinary. In order to try out the instructions below with your own photos, sign up for a free Cloudinary account and upload the image to Cloudinary.

1. Limit Images to Specific Dimensions

To limit the size of an image to specific dimensions, we can change the crop value (c in URLs) to have a limit (c_limit).

Below is an image that’s been resized from 850 x 565 px. to 70 x 70 px. with the limit option. Due to the preserved aspect ratio, this display is 70 x 47 px.

https://res.cloudinary.com/demo/image/upload/w_70,h_70,c_limit/cashew_chicken.jpg

Learn more in the Cloudinary Cookbook

2. Crop Images With Auto Gravity

To focus on specific details—faces, objects, color contrasts—while resizing images, we can crop the images with Cloudinary’s intelligent auto-gravity features. The parameter to set is gravity (g in URLs), which offers an auto value (g_auto) that intelligently crops according to your image’s content.

Cloudinary automatically crops images with content-aware, AI-based features by selecting faces, individual features, or areas of interest. Look at how Cloudinary uses the g_auto setting to crop the most interesting area, as determined by AI:

Another example of avoiding irrelevant objects instead of the product in product images taking center stage is defining the product as the focus. The picture on the right below has the backpack in focus.

This code uses g_auto:classic

https://res.cloudinary.com/demo/image/upload/c_thumb,g_auto:classic,h_175,w_175/v1551428220/veducate/spencer-backman-482079-unsplash.jpg

This code uses g_auto:backpack to focus on the backpack:

https://res.cloudinary.com/demo/image/upload/c_thumb,g_auto:backpack,h_175,w_175/v1551428220/veducate/spencer-backman-482079-unsplash.jpg

Learn more about gravity-based cropping in our tutorial

3. Expand Images with AI-Powered Generative Fill

Generative Fill works with Cloudinary’s padding crop modes and leverages the new gen_fill option for backgrounds (b_gen_fill for URLs). Combining these options allows users to achieve a visually pleasing fill that seamlessly matches the original image. You can even add a natural language prompt to the gen_fill command to specify what the generated background should contain.

Let’s see an example of generative fill. Here is an original image with a width of 600 and a height of 900:

Original image, 600×900

Here is how we use c_pad to resize the image while maintaining aspect ratio and visibility of the original. Then, Cloudinary adds in new areas by using their generative fill. This code pads the original to a 1:1 aspect ratio.

https://res.cloudinary.com/demo/image/upload/b_gen_fill,c_pad,ar_1:1/v1687525630/ai/woman_model.jpg

Here, we can use c_lpad to scale down the image with padding if it is larger than the specified width/height limit, maintaining aspect ratio and visibility. The new areas will be generated around the scaled image as needed. Here, we’ve created a 400×800 image from the original – the original is shrunk to fit, and new imagery is inserted, including feet!

https://res.cloudinary.com/demo/image/upload/c_lpad,h_800,w_400,b_gen_fill/v1687525630/ai/woman_model.jpg

For more information on generative fill, check out the documentation or try the demo.

Sign up for a free Cloudinary account and resize images automatically with these features and more.