CSS Background Images and Responsive Image Properties for Beginners

Подписаться 307 тыс.

Просмотров 26 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): 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 ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ 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 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:
loremipsum.io/21-of-the-best-...
Sites with Freely-Usable Images:
unsplash.com/
www.pexels.com/
gratisography.com/
pixabay.com/
Image Editing / Resizing Software:
For Windows: www.irfanview.com/
As a Service: www.canva.com/
Suggestions for Mac:
www.cleverfiles.com/howto/top...
Full Featured Editor for Windows/Mac/Linux:
www.gimp.org/
Image Compression (shrink file size):
tinypng.com/
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
🔗 HTML Special Characters and Entities: unicode-table.com
🔗 CanIUse.com: caniuse.com/
📚 References:
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
🔗 MDN - Columns: developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: developer.mozilla.org/en-US/d...
🔗 MDN - Flexbox: developer.mozilla.org/en-US/d...
🔗 MDN - Basic Concepts of Grid Layout: developer.mozilla.org/en-US/d...
🔗 MDN - Grid Template Areas: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Images: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Background Images: developer.mozilla.org/en-US/d...
🔗 Chip Cullen - Article on Content Layout Shift: chipcullen.com/what-width-and...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: 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

Опубликовано:

23 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@uniquebanda69 2 года назад

As always top-notch tutorial, No doubt you are a good teacher & good person too.

@DaveGrayTeachesCode 2 года назад

Thank you for the kind words, Mr. U! 🙏💯

@frankaspire7522 Год назад

You are the best thing that ever happened to my life. I started programming because of you. You make it look so simple. Thank you and one day if I get my first programming job I'll surely buy you that cup of coffee and Tacos I know you love it.

@DaveGrayTeachesCode Год назад

Glad I could help, Frank! You can do it! And yes, I love coffee and tacos! 🚀

@myutube290269 7 месяцев назад

Thank you for your dedication. Each lesson is easy to follow and well explained step by step.

@iluvsyphonfilter Год назад

Fantastic lesson, Dave! I learned a lot from this video, thanks!

@DaveGrayTeachesCode Год назад

Glad to hear it!

@jeffwymore3695 Год назад

Hi Dave! Great job on these videos you're producing, you've quickly jumped to the top of the list for JS/HTML/CSS/React tutorials on RU-vid IMO. I've been meaning to pass along a shortcut to you that you might not be aware of. For HTML/CSS/JS commenting shortcut you usually use shift+alt+a in your videos, you can also use ctrl+/ for a comment shortcut that I think is easier and faster. Always good to improve your shortcut arsenal. Keep up the great tutorials and thank you for all the hard work putting them together! 😃

@DaveGrayTeachesCode Год назад

Thank you for the kind words, Jeff! And thanks for the comment suggestion, too!

@jd2722 5 месяцев назад

This video is amazing. Thank you.

@David-ek1ye 2 года назад

Another big thanks for the awesome work you are doing.

@DaveGrayTeachesCode 2 года назад

Thank you, David! 💯

@JayantBB78 2 месяца назад

Wow, Awesome examples. 👍🏻

@Luis-vy2oi 4 месяца назад

Thank you so much! You're awesome.

@9nikolov 4 месяца назад

28:50 Alternative Solution background-image: url("../../ex-1/images/mountains-2145x1398.jpg"); background-repeat: no-repeat; /* background mask layer (simillar to the one in photoshop) */ background-color: red; background-blend-mode: multiply;

@XacsonTech 2 года назад

Learning from Nigeria. Thank you so much for always taking you're time to explain everything, it's almost as if I am In a lecture hall. God bless your heart.

@DaveGrayTeachesCode 2 года назад

You're welcome, Roy! 💯

@mattgrimaldi13 Год назад

You are the man. Newb here, not able to work through how to get my .jpg to display as a background from css. You explained it like a boss. Thanks!

@DaveGrayTeachesCode Год назад

Glad it helped!

@abdomahmoud8769 2 года назад

Hi Dave! 44:09 I noticed that it worked in all browsers including "firefox" with just the "webkit prefix", and thank you so much for this awesome video.

@DaveGrayTeachesCode 2 года назад

It is best to provide both as this could change. You can check support for all properties at CanIUse.com. Mozilla Firefox and some other browsers have their own vendor prefixes, too: developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

@fedeb2241 Год назад

Thank you i really liked the tutorial

@DaveGrayTeachesCode Год назад

You're welcome!

@nomer9998 2 года назад

Thank you for good lesson

@DaveGrayTeachesCode 2 года назад

You're welcome!

@kd6613 8 месяцев назад

🎯 Key Takeaways for quick navigation: 00:00 🎥 Dave introduces a beginner CSS series focusing on images, using tools like Chrome and Visual Studio Code. 00:27 📸 There are two types of images in web design: foreground images (visible on the page) and background images. 01:37 🖼️ Demonstrates adding a sample image to an HTML document, emphasizing the importance of setting the width and height for the browser to reserve space and prevent content layout shift. 05:46 🖥️ Highlights the responsiveness of an image when given a percentage width in CSS, showing how the image size adjusts as the window size changes. 06:53 🚫 Images are originally inline elements in HTML, creating unwanted space below them. Setting them to "display: block" in CSS removes this space. 09:10 🖼️ Introduced the use of a "hero" class and how to include an image within a figure element. 10:05 📏 Demonstrated setting image attributes such as width, height, and alt for clarity and SEO. 12:08 📐 Covered the importance of responsive design using percentages and the "auto" setting to avoid content layout shifts. 13:18 🔵 Showed how to transform a square image into a circular profile picture using the "border-radius" property. 17:29 🚫 Discussed utility classes, specifically the "no wrap" class for text elements and the "off-screen" class to hide elements while maintaining accessibility. 18:37 🎨 Introduced the basics of CSS background images, starting with a background color as a fallback. 19:33 📁 Explained how to set a background image using URL paths, referencing the image folder from the CSS. 20:44 🔁 Discussed the `background-repeat` property, controlling the repetition of an image on x or y axis. 22:32 🌈 Highlighted the impact of image transparency, emphasizing the interplay between text and background. 24:14 🔎 Explored the `background-size` property with values like "cover" and "contain", influencing how the image scales. Made with HARPA AI

@rightbackatcha22 Год назад

you sir, are a legend! thank you!

@DaveGrayTeachesCode Год назад

Thank you, Ash! 🙏

@DaveGrayTeachesCode 2 года назад

There is much to learn when it comes to images in HTML & CSS. This tutorial should give you a great start for working with images in CSS. It covers responsive images on your page including considerations for content layout shift, and it also includes many ways to apply background images with CSS. If you're just starting with CSS, I recommend going to the beginning of my CSS for Beginners playlist found here: ru-vid.com/group/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

@behroozyazdani6023 2 года назад

So thanks Bro, Is there plan for layout(Flex,Grid,Float,Table)?I mean a summary and comparison of the tutorials provided earlier on the types of layout and positioning on the web.

@DaveGrayTeachesCode 2 года назад

@@behroozyazdani6023 they can all be used together. I've got a mini project or two using these coming up. 💯

@behroozyazdani6023 2 года назад

@@DaveGrayTeachesCode My gratitude to you for all you have done, which I will never forget. I truly appreciate you and your time you spent helping me in many occasions. Thank you very much for the course. I enjoyed every minute of your lecture as well as your marvelous sense of humor.

@DaveGrayTeachesCode 2 года назад

@@behroozyazdani6023 thank you for the kind words my friend 🙏🙏

@ahmad-murery 2 года назад

Nice, useful and informative video, background-attachment is another cool property, for background position we can also add offset along with the position, something like background-position: top -4px right 5px; Thanks Dave,

@DaveGrayTeachesCode 2 года назад

Good additions Ahmad! 💯

@7doors847 2 года назад

Dave is really kicking some serious “TUTS”!

@DaveGrayTeachesCode 2 года назад

😂 thank you! 💯

@queenieee3944 2 года назад

Your videos are so much helpful sir

@DaveGrayTeachesCode 2 года назад

Glad I could help! 💯

@queenieee3944 2 года назад

@@DaveGrayTeachesCode💖💞

@TheLittlemaster2009 2 года назад

very nice content thumbs up for your effort and time, also make a video on svg animation

@DaveGrayTeachesCode 2 года назад

You're welcome, and thank you for the request! 🙏💯

@Bayans89 Год назад

Hello Dave, thanks for the grate tutorials. just one question, in real life projects is the images editing done by css, because I think it can be done easier using photoshop like dark filters or image in the text even mixing backgrounds with gradient.

@DaveGrayTeachesCode Год назад

It can be done with either / both. If the you change the size of the image based on viewport, it can also be useful to have several sizes of the same image and use srcset and sizes attributes with the img element. It is a bit more advanced, but I should make a tutorial on this: developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

@Dani-bq6kp 6 месяцев назад

Thank you!!

@mohamedabdelrazig6920 2 года назад

Hi dave i love your tutorials, is there a chance you could cover media queries?

@DaveGrayTeachesCode 2 года назад

That is coming up in this series very soon, Mohamed 💯 Thanks for the kind words and request! 🙏🙏

@mohamedabdelrazig6920 2 года назад

@@DaveGrayTeachesCode Thank you so much! You’re tutorials are honestly the best ones out there on youtube you deserve 6 figure followers! It got me through css and now i just have to cover the media queries and the transformations:))). I absolutely love your channel!!!!!

@theanispathan 2 года назад

good video | keep it up

@DaveGrayTeachesCode 2 года назад

Thank you!

@theanispathan 2 года назад

@@DaveGrayTeachesCode welcome

@tafarakasparovmhangami2356 2 года назад

Why do you prefer changing the position of the figcaption to using using visibility: hidden?

@DaveGrayTeachesCode 2 года назад

Notice the shift of the profile pic image after using position on the figcaption. If I used visibility, figcaption would still be taking up space under the image even though it is not visible. The use of visibility also removes the element from the accessibility tree. We want screenreaders to be able to read the figcaption. Reference: developer.mozilla.org/en-US/docs/Web/CSS/visibility

@tafarakasparovmhangami2356 2 года назад

@@DaveGrayTeachesCode Thank you!