Enhancing Designs with Backgrounds, Gradients, and Shadows
Learn to use gradients, patterns, images, and colors to enhance webpage backgrounds.
We'll cover the following...
As we've seen in the previous lessons, colors and backgrounds are essential elements of web design that enhance visual appeal and user engagement. CSS provides powerful properties to control background colors, images, gradients, and patterns, allowing us to create dynamic and attractive web pages.
Understanding background properties
The background-color property sets the background color of an element. We can specify colors using names, HEX codes, RGB, RGBA, HSL, or HSLA values.
body {background-color: #f0f8ff; /* AliceBlue */}
This sets the background color of the entire page to AliceBlue.
Applying background images
The background-image property allows us to set an image as the background of an element.
.header {background-image: url(header-bg.jpg);}
This applies the header-bg.jpg image as the background for elements with the class header.
Controlling background image display
We can adjust how the background image appears using additional properties:
background-repeat: Controls if and how the background image repeats.
background-repeat: no-repeat;
The following table shows the commonly used values for the background-repeat property.
Value | Description |
| Repeats the image in both directions (horizontally and vertically) |
| Does not allow image to repeat |
| Repeats the image in horizontal direction |
| Repeats the image in vertical direction |
| Repeats the image in both directions with even spacing |
| Repeats the image in both directions, filling the entire space |
background-size: Specifies the size of the background image.
background-size: cover;
The ...