Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn about CSS background images and responsive image properties in this full tutorial for beginners. Resize your images by browser size and set great backgrounds where text content is still the main focus.

Subscribe ➜ https://bit.ly/3nGHmNn

This lesson is part of a CSS for Beginners tutorial series playlist:
   • CSS Tutorials for Beginners  

All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course'>https://github.com/gitdagray/css_course

Course Updates ➜ https://courses.davegray.codes/

CSS Background Images and Responsive Image Properties for Beginners

(00:00) Intro
(00:05) Welcome
(00:26) Starter Code
(01:33) Prevent content layout shift
(04:02) Style responsive images
(06:23) Remove the default space under images
(08:51) Profile picture example
(13:32) Hero section
(18:37) Fallback backgroundcolor
(19:31) Setting a backgroundimage
(21:01) backgroundrepeat
(21:38) background image patterns
(23:04) backgroundsize
(24:57) Image size considerations
(26:24) Make text standout over a background
(28:50) Create a background mask layer
(31:50) backgroundposition
(33:28) lineargradient backgrounds
(36:19) Multiple background image layers
(38:51) backgroundsize
(39:23) Filling text with a background image
(44:35) background property shorthand

Image Resources:
Placeholder Image Generators:
https://loremipsum.io/21ofthebest...
Sites with FreelyUsable Images:
https://unsplash.com/
https://www.pexels.com/
https://gratisography.com/
https://pixabay.com/
Image Editing / Resizing Software:
For Windows: https://www.irfanview.com/
As a Service: https://www.canva.com/
Suggestions for Mac:
https://www.cleverfiles.com/howto/top...
Full Featured Editor for Windows/Mac/Linux:
https://www.gimp.org/
Image Compression (shrink file size):
https://tinypng.com/

⚙ Web Dev Tools:
Chrome Browser: https://www.google.com/chrome/
Visual Studio Code (VS Code): https://code.visualstudio.com/
Live Server VS Code Extension: https://marketplace.visualstudio.com/...
vscodeicons VS Code Extension: https://marketplace.visualstudio.com/...
Github Themes VS Code Extension: https://marketplace.visualstudio.com/...
W3C CSS Validator: https://jigsaw.w3.org/cssvalidator/
Specificity Calculator: https://specificity.keegan.st/
HTML Special Characters and Entities: https://unicodetable.com
CanIUse.com: https://caniuse.com/

References:
MDN CSS Selectors: https://developer.mozilla.org/enUS/d...
MDN How to Apply Colors to HTML Elements with CSS: https://developer.mozilla.org/enUS/d...
MDN CSS Values and Units: https://developer.mozilla.org/enUS/d...
MDN The Box Model: https://developer.mozilla.org/enUS/d...
MDN Styling Lists: https://developer.mozilla.org/enUS/d...
MDN Display Property: https://developer.mozilla.org/enUS/d...
MDN Floats: https://developer.mozilla.org/enUS/d...
MDN Columns: https://developer.mozilla.org/enUS/d...
MDN Margin Collapsing: https://developer.mozilla.org/enUS/d...
MDN WhiteSpace: https://developer.mozilla.org/enUS/d...
MDN Positioning: https://developer.mozilla.org/enUS/d...
MDN Flexbox: https://developer.mozilla.org/enUS/d...
MDN Basic Concepts of Grid Layout: https://developer.mozilla.org/enUS/d...
MDN Grid Template Areas: https://developer.mozilla.org/enUS/d...
MDN CSS Images: https://developer.mozilla.org/enUS/d...
MDN CSS Background Images: https://developer.mozilla.org/enUS/d...
Chip Cullen Article on Content Layout Shift: https://chipcullen.com/whatwidthand...

✅ Follow Me:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  
Blog: https://yesdavidgray.com
Reddit:   / daveoneleven  

Was this tutorial about CSS Background Images and Responsive Image Properties helpful? If so, please share. Let me know your thoughts in the comments.

#css #background #images