Background images can be tricky to work with when added behind text. In this video, see how to incorporate this style into your project.
- [Instructor] Back in our projects,…let's add a background image to one of these sections.…I'm going to add mine to my education section…since there's a lot of extra space here.…It could use a little decoration.…There's actually only one container we can use here…to add the background image to and the background color.…So, we'll use the linear gradient technique…we discussed in the last lesson.…The first thing I'm going to do is I'm going to copy…the whole decoration from our last JSFiddle example…just so that I don't have to type it out all over again.…
Now, back in my CSS file,…I'm going to replace the current background color…with this new linear gradient background instead.…Here we go.…So, just going to reformat this, here am I to RGBA color values…and then here's the background image…and then just another value of no-repeat.…So, I don't need this background anymore…but what I will do is I'm going to take this hex code,…I'm going to convert this to an RGB value…so that I can use that in my color overlay here instead.…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 20m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.