Web Dev Roadmap for Beginners (Free!): [ Ссылка ]

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 ➜ [ Ссылка ]

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
[ Ссылка ]

🔗 All Resources for this CSS Tutorial Series: [ Ссылка ]

📬 Course Updates ➜ [ Ссылка ]

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 background-color
(19:31) Setting a background-image
(21:01) background-repeat
(21:38) background image patterns
(23:04) background-size
(24:57) Image size considerations
(26:24) Make text standout over a background
(28:50) Create a background mask layer
(31:50) background-position
(33:28) linear-gradient backgrounds
(36:19) Multiple background image layers
(38:51) background-size
(39:23) Filling text with a background image
(44:35) background property shorthand

🖼️ Image Resources:
Placeholder Image Generators:
[ Ссылка ]
Sites with Freely-Usable Images:
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
Image Editing / Resizing Software:
For Windows: [ Ссылка ]
As a Service: [ Ссылка ]
Suggestions for Mac:
[ Ссылка ]
Full Featured Editor for Windows/Mac/Linux:
[ Ссылка ]
Image Compression (shrink file size):
[ Ссылка ]

⚙ Web Dev Tools:
🔗 Chrome Browser: [ Ссылка ]
🔗 Visual Studio Code (VS Code): [ Ссылка ]
🔗 Live Server VS Code Extension: [ Ссылка ]
🔗 vscode-icons VS Code Extension: [ Ссылка ]
🔗 Github Themes VS Code Extension: [ Ссылка ]
🔗 W3C CSS Validator: [ Ссылка ]
🔗 Specificity Calculator: [ Ссылка ]
🔗 HTML Special Characters and Entities: [ Ссылка ]
🔗 CanIUse.com: [ Ссылка ]

📚 References:
🔗 MDN CSS Selectors: [ Ссылка ]
🔗 MDN - How to Apply Colors to HTML Elements with CSS: [ Ссылка ]
🔗 MDN - CSS Values and Units: [ Ссылка ]
🔗 MDN - The Box Model: [ Ссылка ]
🔗 MDN - Styling Lists: [ Ссылка ]
🔗 MDN - Display Property: [ Ссылка ]
🔗 MDN - Floats: [ Ссылка ]
🔗 MDN - Columns: [ Ссылка ]
🔗 MDN - Margin Collapsing: [ Ссылка ]
🔗 MDN - White-Space: [ Ссылка ]
🔗 MDN - Positioning: [ Ссылка ]
🔗 MDN - Flexbox: [ Ссылка ]
🔗 MDN - Basic Concepts of Grid Layout: [ Ссылка ]
🔗 MDN - Grid Template Areas: [ Ссылка ]
🔗 MDN - CSS Images: [ Ссылка ]
🔗 MDN - CSS Background Images: [ Ссылка ]
🔗 Chip Cullen - Article on Content Layout Shift: [ Ссылка ]

✅ Follow Me:
Github: [ Ссылка ]
Twitter: [ Ссылка ]
LinkedIn: [ Ссылка ]
Blog: [ Ссылка ]
Reddit: [ Ссылка ]

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

свернуть