CSS - Backgrounds


Background Properties


The background-color property sets the background color of an element. You can specify the color using formats like color names, RGB, HEX, or HSL values.

Example: Color Name

background-color: red;

This sets the background color to red using a color name. You can also use RGB values:

Example: RGB Values

background-color: rgb(255, 0, 0);

HEX values:

Example: HEX Values

background-color: #ff0000;

or HSL values:

Example: HSL Values

background-color: hsl(0, 100%, 50%);

You can control transparency with RGBA or HSLA values. For instance:

Example: RGBA Values

background-color: rgba(255, 0, 0, 0.5);


The background-image property sets one or more background images for an element using the url() function.

Example: Single Image

background-image: url('image.jpg');

This sets "image.jpg" as the background image. To set multiple images:

Example: Multiple Images

background-image: url('image1.jpg'), url('image2.jpg');


The background-repeat property controls how a background image repeats within an element.

  • repeat: Repeats both horizontally and vertically (default).
  • repeat-x: Repeats only horizontally.
  • repeat-y: Repeats only vertically.
  • no-repeat: Displays once without repeating.

Example: No Repeat

background-repeat: no-repeat;


The background-attachment property specifies if a background image should scroll with the page or stay fixed.

  • scroll: The default value; makes it scroll with content.
  • fixed: Keeps it fixed in position.

Example: Fixed Attachment

background-attachment: fixed;


The background-position property allows you to control where a background image is placed within an element. You can specify position using keywords, percentages, or length values. Common keyword values are top, bottom, left, right, and center.

Example: Top Right

background-position: top right;

You can also use percentages or length values to precisely position the image, like:

Example: Percentages

background-position: 50% 50%;

Example: Length Values

background-position: 100px 200px;


The background-size property is used to resize background images. You can specify size using keywords or specific dimensions. Common keyword values are auto, cover, and contain.

  • Auto displays the image at its original size.
  • Cover scales the image to cover the entire element, cropping if necessary to maintain aspect ratio.
  • Contain scales the image to fit within the element, preserving its aspect ratio.

You can also specify exact dimensions using length values or percentages, like:

Example: Specific Dimensions

background-size: 200px 300px;

Example: Percentage Dimensions

background-size: 50% 50%;


The background-origin property specifies where a background image is positioned relative to the element's box model. Possible values are padding-box, border-box, and content-box.

  • Padding-box positions it relative to the element's padding.
  • Border-box positions it relative to the element's border.
  • Content-box positions it relative to the element's content.

Example: Border Box

background-origin: border-box;


The background-clip property defines how far a background extends within an element's box model. Possible values are border-box, padding-box, and content-box.

  • Border-box extends it to the outer edge of the element's border.
  • Padding-box clips it to the outer edge of the element's padding.
  • Content-box clips it to the outer edge of the element's content.

Example: Padding Box

background-clip: padding-box;

These properties give you many options for controlling backgrounds in CSS. Use them alone or together to create nice and responsive backgrounds for your web pages.

Shorthand Background Property

The background shorthand property lets you set multiple background properties in one declaration. This can make your CSS code shorter and easier to read.

The order of values in the shorthand property is:

Example: Order of background shorthand property values

background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position> / <background-size>;

You can combine these background properties:

Example: Combination of individual background properties

background-color: #ff0000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;

Into one shorthand declaration:

Example: Shorthand declaration for background properties

background: #ff0000 url('image.jpg') no-repeat fixed center / cover;

Note that the background-size value is separated from the background-position value by a forward slash (/).

When using the shorthand property, any omitted values will be set to their default values. If you want all background properties explicitly set, include all necessary values in the shorthand declaration.

Using the background shorthand property can help simplify your CSS code and make it more maintainable. However, if you only need to set one or two background properties, it may be more readable to use individual properties instead of the shorthand.

Multiple Backgrounds

CSS allows you to layer multiple background images on a single element. This technique can create interesting visual effects and add depth to your designs.

To specify multiple background images, you can use a comma-separated list of background image values in the background-image property or the background shorthand property.

Example: Layering Two Background Images

.element {
  background-image: url('image1.jpg'), url('image2.jpg');

You can also combine multiple background images with other properties. When using the background shorthand property, the values for each layer are separated by commas.

Example: Combining Multiple Background Images with Properties

.element {
  background: url('image1.jpg') no-repeat center, 
              url('image2.jpg') repeat-x top;

You can also specify different sizes, positions, and other properties for each layer.

Example: Specifying Different Sizes and Positions

.element {
  background: url('image1.jpg') no-repeat center/cover,
              url('image2.jpg') repeat-x top/50% auto;

When using multiple backgrounds, the first image specified will be on top. Subsequent images will be layered beneath it in order they are declared.

Multiple backgrounds give you options to create visually rich designs using CSS. Experiment with different combinations of images, positions, sizes, and other properties to achieve your desired effects.

Background Gradients

CSS allows you to create color transitions known as gradients for backgrounds. You can create linear or radial gradients without using image files, resulting in faster loading times.

To create a linear gradient, use the linear-gradient() function as the value for the background or background-image property. Specify the direction of the gradient and the colors you want to transition between.

Example: Linear Gradient

.element {
  background: linear-gradient(to right, red, blue);

This creates a gradient that transitions from red on the left to blue on the right. You can specify the direction using keywords like to top, to bottom, to left, to right, or an angle in degrees.

Color stops control where each color transition occurs. By default, transitions are evenly spaced, but you can specify percentages or lengths to control their positions.

Example: Linear Gradient with Color Stops

.element {
  background: linear-gradient(to right, red 0%, blue 50%, green 100%);

To create a radial gradient, use the radial-gradient() function. Specify the center position, shape (circle or ellipse), and color stops.

Example: Radial Gradient

.element {
  background: radial-gradient(circle at center, red, blue);

This creates a circular gradient centered within the element that transitions from red at the center to blue at the edges.

You can create more complex gradients by specifying multiple color stops and using transparency.

Example: Complex Gradient

.element {
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));

Gradients can be combined with other background properties like background-size and background-repeat to create various effects.

Example: Repeating Gradient

.element { 
  background: repeating-linear-gradient(45deg, red, blue 10%);

CSS gradients provide a way to create visually appealing backgrounds without relying on image files. Experiment with different colors, directions, and color stops to achieve your desired effects.

Background Blending

The background-blend-mode property in CSS lets you mix background images and colors within an element. This creates visual effects by combining multiple backgrounds using different blend modes.

The available blend modes are:

  • normal: The default mode; no blending is applied.
  • multiply: Multiplies the background color with the image, resulting in a darker effect.
  • screen: Multiplies the inverse of the background color with the image, resulting in a lighter effect.
  • overlay: Applies a combination of multiply and screen based on the background color.
  • darken: Selects the darker color values from the image and the background color.
  • lighten: Selects the lighter color values from the image and the background color.

Other blend modes include: color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.

To use background blending, apply multiple backgrounds to an element and then specify the desired blend mode with the property.

Example: Background Blending with Multiple Images

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-blend-mode: multiply;

In this example, image1.jpg and image2.jpg are mixed using the mode, creating a darker overlapping effect.

You can also mix images with colors.

Example: Background Blending with Image and Color

.element {
  background: url('image.jpg'), #ff0000;
  background-blend-mode: screen;

Here, the mode is used to mix the image with a red color, resulting in a lighter effect.

If you have multiple backgrounds, you can specify multiple modes for each layer.

Example: Multiple Background Blend Modes

.element {
  background: url('image1.jpg'), url('image2.jpg'), #ff0000;
  background-blend-mode: multiply, overlay;

In this case, you use one mode to mix two images, then another mode to combine them both together again but now including red as well.

Background blending opens up many creative possibilities for combining images and colors. Experimenting will help achieve your desired effects.

Background Opacity

The opacity of background colors and images in CSS can be controlled using the opacity property or by using RGBA or HSLA color values.

The opacity property sets the overall opacity of an element, including its content and background. It takes a value between 0 (fully transparent) and 1 (fully opaque).

Example: Opacity Property

.element {
  background-color: #ff0000;
  opacity: 0.5;

In this example, the element's background color is set to red, and the opacity is set to 0.5, making it 50% transparent.

However, using the opacity property affects the entire element, including its content. If you only want to control the opacity of the background color or image without affecting the content, you can use RGBA or HSLA color values.

RGBA stands for Red, Green, Blue, Alpha; where alpha represents opacity. HSLA stands for Hue, Saturation, Lightness, Alpha; with alpha serving the same purpose.

Example: RGBA Color Value

.element {
  background-color: rgba(255, 0, 0, 0.5);

In this example, the background color is set to red with an opacity of 0.5 using RGBA color value. The content remains fully opaque.

You can also use RGBA or HSLA color values with background images.

Example: RGBA with Background Image

.element {
  background-image: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), 

Here a linear gradient with transparent red and blue colors is layered on top of a background image. The image itself remains fully opaque while gradient colors are semi-transparent.

Using RGBA or HSLA allows you to control transparency independently from content providing flexibility in creating visually interesting designs.

Background Patterns

Background patterns add texture and visual interest to your web pages. You can create repeating background patterns using small images and CSS techniques for seamless repetition.

To create a repeating background pattern, start by selecting or creating a small image that can be tiled seamlessly. The image should have edges that match up when repeated horizontally and vertically.

Simple Pattern

Example: Simple Pattern

.element {
  background-image: url('pattern.png');
  background-repeat: repeat;

This code sets the background image to "pattern.png" and repeats it both horizontally and vertically to create a seamless pattern.

You can use the background-repeat property with the repeat value. This will tile the image in both directions to fill the element's background.

If you only want the pattern to repeat in one direction, you can use repeat-x for horizontal repetition or repeat-y for vertical repetition.

Horizontal Pattern Repetition

Example: Horizontal Pattern Repetition

.element {
  background-image: url('pattern.png');
  background-repeat: repeat-x;

Another technique for creating seamless patterns is to use CSS gradients with background images. By layering a semi-transparent gradient over the pattern image, you can create a more subtle effect.

Pattern with Gradient Overlay

Example: Pattern with Gradient Overlay

.element {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
  background-repeat: repeat;

This code applies a semi-transparent white gradient over the repeating pattern image, creating a softer effect.

When creating background patterns, consider the size of the image file. Using larger images can impact page load times; it's best to use small optimized images for patterns. You can also use CSS sprites to combine multiple pattern images into one file, reducing HTTP requests.

Background patterns add depth and visual interest to your web designs. By using small seamless images and CSS techniques like background-repeat and gradients, you can create engaging backgrounds for your web pages.

Responsive Background Images

Responsive web design delivers optimal user experiences across devices. Using responsive background images means providing appropriate image sizes and resolutions based on the viewer's screen size.

One technique is serving different image files based on the device's screen size. You can define multiple background-image properties using media queries.

Responsive Background Images with Media Queries

Example: Responsive Background Images with Media Queries

.element {
  background-image: url('small-image.jpg');

@media (min-width: 768px) {
  .element {
    background-image: url('medium-image.jpg');

@media (min-width: 1200px) {
  .element {
  background-image: url('large-image.jpg');

This code sets a default small background image. As screen sizes increase to 768px and 1200px wide, the medium-size and large-size images are used instead.

You can also use the image-set() function to specify multiple image files with different resolutions. The browser chooses the most appropriate image based on the device's pixel density.

Responsive Background Images with image-set()

Example: Responsive Background Images with image-set()

.element {
  background-image: image-set(
    url('image-1x.jpg') 1x,
    url('image-2x.jpg') 2x

"image-1x.jpg" is used on standard displays while "image-2x.jpg" (double resolution) is used on high pixel density screens like Retina displays.

Another approach is using CSS gradients instead of image files. Gradients are resolution-independent and scale well across different screen sizes.

Responsive Background with Gradient

Example: Responsive Background with Gradient

.element {
  background-image: linear-gradient(to right, #ff0000, #0000ff);

Consider using vector-based patterns (SVGs) instead of raster images. SVGs scale without losing quality, making them ideal for responsive designs.

Responsive Background with SVG

Example: Responsive Background with SVG

.element {
  background-image: url('pattern.svg');

When planning your responsive backgrounds, consider your target devices, screen resolutions, and visual impact you want to achieve. Mix techniques like media queries, image-set(), CSS gradients, and SVGs to create engaging backgrounds that adapt well to different screens.