How do I add background colours and images to elements in CSS?

By /

In CSS (Cascading Style Sheets), background colours and images play a significant role in web design, enabling web developers to enhance the visual appeal and aesthetics of their web pages. CSS provides several methods to add background colours and images to HTML elements, allowing you to create captivating and visually engageing layouts. In this comprehensive guide, we will explore various techniques to add background colours and images using CSS, providing you with the knowledge to create stunning backgrounds that complement your web content.

1. Background Colours

The simplest way to add a background to an element is by using the background-color property. The background-color property allows you to specify a colour for the background of an element using various formats, such as named colours, hexadecimal, RGB, or HSL values.

/* Example: Adding a background color to a div element */
div {
  background-color: #f0f0f0; /* Light gray background */
}

In this example, the background of all <div> elements will be displayed in a light grey colour.

2. Named Colours

CSS includes a set of 147 predefined named colours that you can use directly in the background-color property.

/* Example: Using a named color for the background of a section */
section {
  background-color: lightblue;
}

Named colours are easy to use and provide a quick way to apply specific background colours to your elements.

3. Hexadecimal Colours

Hexadecimal colours are another popular method for defining colours in CSS. They consist of a hash (#) followed by six hexadecimal digits representing the RGB values.

/* Example: Using a hexadecimal color for the background of a header */
header {
  background-color: #007bff; /* Blue background */
}

In this example, the background of the <header> element will be set to a blue shade defined by the hexadecimal value.

4. RGB and RGBA Colours

RGB (Red, Green, Blue) and RGBA (RGB with alpha channel) colours provide more control over the background colour components. RGB colours are defined using the rgb() function, while RGBA colours include an additional alpha value (opacity) defined using the rgba() function.

/* Example: Using RGBA color for the background of a button */
button {
  background-color: rgba(255, 0, 0, 0.8); /* Red with 80% opacity */
}

RGBA colours are particularly useful when you want to create semi-transparent background colours or overlays.

5. HSL and HSLA Colours

HSL (Hue, Saturation, Lightness) and HSLA (HSL with alpha channel) colours provide an alternative way to describe colours based on their hue, saturation, and lightness values.

/* Example: Using HSLA color for the background of a span */
span {
  background-color: hsla(120, 100%, 50%, 0.7); /* Green with 50% lightness and 70% opacity */
}

HSL colours offer more intuitive control over colour variations while maintaining consistency in saturation and lightness.

6. Background Images

In addition to background colours, CSS allows you to use images as backgrounds for HTML elements. You can use the background-image property to specify the URL of the image.

/* Example: Adding a background image to a section */
section {
  background-image: url("background-image.jpg");
}

In this example, the image specified by the URL “background-image.jpg” will be used as the background for all <section> elements.

7. Background Image Positioning

CSS provides the background-position property to control the positioning of the background image within its container. You can use keywords like center, top, bottom, left, right, or specify the position in pixels or percentages.

/* Example: Positioning the background image for a header */
header {
  background-image: url("header-background.jpg");
  background-position: center;
}

In this example, the background image for the <header> element will be centred within the container.

8. Background Image Repeat

By default, background images repeat both horizontally and vertically to cover the entire container. You can use the background-repeat property to control the image’s repetition behaviour.

/* Example: Controlling the background image repeat for a div */
div {
  background-image: url("pattern-background.jpg");
  background-repeat: repeat-x; /* Repeat horizontally only */
}

In this example, the background image for the <div> element will repeat only horizontally along the x-axis.

9. Background Image Size

The background-size property allows you to adjust the size of the background image to fit the container. You can use keywords like cover or contain, or specify the size in pixels or percentages.

/* Example: Adjusting the background image size for a banner */
.banner {
  background-image: url("banner-image.jpg");
  background-size: cover;
}

In this example, the background image for elements with the class .banner will be resized to cover the entire container while maintaining its aspect ratio.

10. Background Image Attachment

The background-attachment property controls whether the background image scrolls with the content or remains fixed within its container.

/* Example: Setting the background image attachment for a section */
section {
  background-image: url("section-background.jpg");
  background-attachment: fixed;
}

In this example, the background image for the <section> element will remain fixed even when the content is scrolled.

11. Combining Background Colours and Images

You can combine background colours and images by specifying both properties for an element. The background colour will be visible if the background image does not cover the entire container.

/* Example: Combining background color and image for a call-to-action */
.cta {
  background-color: #f0f0f0; /* Light gray background color */
  background-image: url("cta-background.jpg"); /* Background image */
}

In this example, the <div> elements with the class .cta will have a light grey background colour, and the background image will be displayed on top of it.

12. Multiple Background Images

CSS3 introduced support for multiple background images on a single element. You can use the background-image property with multiple URLs, and they will be layered one on top of the other.

/* Example: Using multiple background images for a header */
header {
  background-image: url("header-background.jpg"), url("header-pattern.jpg");
}

In this example, the <header> element will display two background images, with the first image at the top of the stack and the second image below it.

13. Background Gradients

CSS gradients allow you to create smooth transitions between multiple colours, which can be used as background images for elements.

/* Example: Creating a background gradient for a sidebar */
.sidebar {
  background-image: linear-gradient(to bottom, #007bff, #00bfff);
}

In this example, the background of the elements with the class .sidebar will have a linear gradient from blue (#007bff) to light blue (#00bfff) from top to bottom.

14. Background-Blend-Mode

The background-blend-mode property allows you to specify how the background image should blend with the background colour or other elements on the page.

/* Example: Using background blend mode for a hero section */
.hero {
  background-image: url("hero-image.jpg");
  background-color: #333;
  background-blend-mode: multiply;
}

In this example, the background image for elements with the class .hero will blend with the dark grey background colour using the multiply blend mode.

15. Conclusion

Adding background colours and images using CSS is an essential aspect of web design, allowing you to enhance the visual appeal and aesthetics of your web pages. By using various colour formats, positioning, repetition, and blending options, you can create stunning and visually engageing backgrounds that complement your web content.

Remember to consider accessibility and contrast when selecting background colours, especially if they will be used with text content. Ensuring sufficient contrast between the background and foreground colours is crucial for readability and accessibility for all users.

With the versatility and flexibility of CSS background properties, you have the tools to create captivating and immersive web experiences that leave a lasting impression on your visitors. Experiment with different background colours, images, gradients, and blend modes to discover the perfect combination that elevates the overall look and feel of your website.

Continue your journey…

  1. How do I add a background image to an HTML page?
  2. How do I change the text colour in CSS?
  3. How do I add a background colour to an element in HTML?
  4. How do I add images and media to my WordPress site?
  5. How do I change the appearance of checkboxes and radio buttons with CSS?
  6. How do I optimise images for SEO?
  7. How can I create a custom CSS tooltip?
  8. How can I create CSS grids and use them for layout?
  9. How do I style links and create link hover effects in CSS?
  10. How do I align elements using CSS?
Scroll to Top