Adding background images behind text can add some flair to your page, but sometimes it can make text hard to read. In this video, look at a couple different techniques.
- Adding background images behind text…can add some flair to your page.…But sometimes, it can make the text hard to read.…Let's first take a look at this example,…and then we'll talk about the syntax.…Sometimes changing the font color…can help aid in readability.…Let's see if it makes a difference in this example.…So I'm changing it to white,…but it doesn't look like it makes much of a difference.…There is another option, though.…One way to improve the readability…is to add a background color with some alpha transparency.…In that way, you can still see the image underneath,…but add a layer of color…to make the text pop out a little bit more.…
I'm going to use an RGBA value.…That's much better!…Now I can still see the image,…but adding the color makes it easier to read the text.…Let's go over the syntax.…Instead of using a keyword or hex code,…use an RGB color value instead.…RGB values are solid,…but you can add an alpha transparency value…using RGBA to specify the opacity of a color.…Choose a value between zero and one.…
- 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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.