From the course: CSS: Enhancing Website Graphics
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Gradients as background images - CSS Tutorial
From the course: CSS: Enhancing Website Graphics
Gradients as background images
- [Instructor] Any CSS property that works with image files can also work with linear and radio gradients. In this video, I'll show you how to use gradients as background images and border images. Here I have an element with a background image that's not an image file but rather a linear gradient. I've set the size of the background image to 100% in both the horizontal and vertical directions and I've set the background image to tile both horizontally and vertically. Now let's reduce the height of this background image and see what happens. By reducing the height I'm creating tiles in the vertical direction of the linear gradient. Let's drop this height down to 20%. I can do the same thing with the image width to tile the linear gradient now in the horizontal direction. Each gradient works together in unison so if I change the angle of the gradient each of the tiles moves together. A radio gradient can also be used as a background image as in this example in which the background…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.