© Joe Attardi 2020
J. AttardiModern CSShttps://doi.org/10.1007/978-1-4842-6294-8_5

5. Backgrounds and Gradients

Joe Attardi1 
(1)
Billerica, MA, USA
 

Any HTML element can have a background. Backgrounds can be images, solid colors, or even gradients.

Solid background colors

Solid background colors are applied using the background-color property. This accepts any valid CSS color expression.
<style>
  .red-background {
    background-color: #FF0000;
  }
</style>
<div class="red-background">Hello world!</div>
Listing 5-1

A solid background color

../images/502345_1_En_5_Chapter/502345_1_En_5_Fig1_HTML.jpg
Figure 5-1

The rendered result

Background images

Images can also be used as an element’s background. There are several properties ...

Get Modern CSS: Master the Key Concepts of CSS for Modern Web Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.