CSS Background Images and Responsive Image Properties for Beginners

[@iluvsyphonfilter]

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

[@DaveGrayTeachesCode]

Glad to hear it!

[@uniquebanda69]

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

[@DaveGrayTeachesCode]

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

[@David-ek1ye]

Another big thanks for the awesome work you are doing.

[@DaveGrayTeachesCode]

Thank you, David! 💯

[@Luis-vy2oi]

Thank you so much! You're awesome.

[@TheLittlemaster2009]

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

[@DaveGrayTeachesCode]

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

[@mohamedabdelrazig6920]

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

[@DaveGrayTeachesCode]

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

[@mohamedabdelrazig6920]

@@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!!!!!

[@PrernaVikram]

its confusing you can explain in more simple terms

[@DaveGrayTeachesCode]

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: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

[@behroozyazdani6023]

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]

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

[@behroozyazdani6023]

@@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]

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

[@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! 🚀

[@kd6613]

🎯 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

[@myutube290269]

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

[@XacsonTech]

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]

You're welcome, Roy! 💯

[@9nikolov]

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;

[@7doors847]

Dave is really kicking some serious “TUTS”!

[@DaveGrayTeachesCode]

😂 thank you! 💯

[@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

[@ahmad-murery]

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]

Good additions Ahmad! 💯

[@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 KZbin 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!

[@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]

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]

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

[@jd2722]

This video is amazing. Thank you.

[@nomer9998]

Thank you for good lesson

[@DaveGrayTeachesCode]

You're welcome!

[@JayantBB78]

Wow, Awesome examples. 👍🏻

[@tafarakasparovmhangami2356]

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

[@DaveGrayTeachesCode]

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]

@@DaveGrayTeachesCode Thank you!

[@rightbackatcha22]

you sir, are a legend! thank you!

[@DaveGrayTeachesCode]

Thank you, Ash! 🙏

[@fedeb2241]

Thank you i really liked the tutorial

[@DaveGrayTeachesCode]

You're welcome!

[@happylife2914]

What color theme you r using in vscode (the name)?

[@DaveGrayTeachesCode]

Search extensions for the Github theme. It has lots of options, too.

[@happylife2914]

@@DaveGrayTeachesCode thank You you are a monster IAM Learning so much from your courses . Can you upoad tutorial for SASS

[@DaveGrayTeachesCode]

@@happylife2914 Thank you for the request! 🙏

[@theanispathan]

good video | keep it up

[@DaveGrayTeachesCode]

Thank you!

[@theanispathan]

@@DaveGrayTeachesCode welcome

[@queenieee3944]

Your videos are so much helpful sir

[@DaveGrayTeachesCode]

Glad I could help! 💯

[@queenieee3944]

@@DaveGrayTeachesCode💖💞

[@Dani-bq6kp]

Thank you!!

[@dharmeshgohil9375]

Waiting mern project with details explanation

[@DaveGrayTeachesCode]

It will take a little bit. Expect a few other tutorials before it is released.