Man, I have been over two hours of crazy frustration trying to figure out what was going on (swearing for granted) with my background - image, and in ten minutes of your video I could find the solution. Its the Kevin thing making it easy to us. Again!...
Don't forget your , otherwise the browser doesn't load the image before the entire CSS file is loaded and parsed. This can be very slow; especially at 3G connections.
I have used a container for the text with a dark semi transparent background. This allows the image to show through and also a darker patch for the lighter text to be displayed. It has the advantage of framing the text which I think is a great eye catching feature if done right. Just my little tip :) Great video again, well done.
Love your content, please keep it up! The way you explain things with such a calm and practicity from the most basic aspect is very conforting and encouraging for everyone, even if you're only looking for a quick fix or tip. ❣
Thank you so very much for explaining the path to use in the url(), because I was so frustrated and annoyed, nothing was working and I kept wondering why, but after writing my path the way you did it works absolutely fine, I'm really grateful thank you ❤
Hi Kevin, First of all, I am not a comment-person at all. I detest commenting. But I just felt that, in this case, I had to make an exception. At first, I didn't even like your videos, but then I watched this one and a few others which convinced me that you're bloody good (if I may say so). I've just finished the first module of my Front-end development course. I've made all the mistakes that a beginner developer can make, and by the way that you mentioned not to do. I was struggling to put my end assignment together. And I was also binge-watching tutorials on UA-cam. However, this was one of the first videos that followed through by actually doing it. So much so that in my end-assignment I almost always used background-blend-mode for my hero images to make the text in the image more readable.
Lol...I just had the path issue with your section styling video. Most important to double check those paths. And the inspect tip works very well. Thanks Kevin!
Really cool videos well documented and explained for very beginner friendly. I found the trick on adding a default background color useful. Thanks for the tips!
Very helpful, and nicely explained! I am just getting into CSS, and just by pausing and peeking at your code I learned other additional things I did not know about. Maybe I should start to watch from the beginning of your series :D. Thank you very much
Damn nice tutorial. Your videos are always helpful and useful. You are so good at teaching and just have an absolutely brilliant talent to convey complex knowledge in simple terms.
what I was looking for is to make it sticky background , So i found out by using background-attachment:fixed; and it worked very nice , and for a tip u can make shade on your background using background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.921), rgba(255, 255, 255, 0.914) ), url(" ./ your url for the bg "); And thank you kevin for the great work you are doing for make the web looking more aesthitic
Thank you for recommending Firefox as the main browser for web design. I like your instruction too. It's easy to understand as I right now am a very experienced beginner to whatever the next step is as a ranking.
Suggestion that isn't specific to CSS, more general web development for beginners: I noticed UA-cam is missing a single video or clear series of videos covering the steps/options for setting up a simple contact form for a website from start to finish on both front-end and back-end. Covering basic options like free, cheap, and premium tools for the backend could be an easy extra video topic that would be helpful to beginners.
So helpful as always. I tried the technique of the background-blend-mode and found that if one adds the alpha channel to the multiply blend mode color (I was using black HSLA ) one can obtain even further control of the 'darkness' buy adjusting the alpha value, i.e. hsl( 0 0 0 / .3); Indebted once again to you sir.
You are doing great videos, with great explanations that are extremely useful for real life projects. Amazing work. My only question regarding this video is this: for how big monitors you must choose an image for? If one person has ultrawide 4k screen, should we choose a background image that can stretch and fit to those screens also or we should use media queries with different images for bigger monitors or maybe we should stop and show only a background color after certain dimensions?
There is a multiple background images stacking order thing, by which you can use multiple backgrounds. It is useful for applying for example linear gradient (to control opacity of the background image).
good video but i've got one point: my teacher said its not a good idea to place an image via css in the website because for SEO reasons. The search engine won't recognize that there's a picture hence for better SEO it's more advisable to put pictures in or tags since it will be seen as a picture
Not only good content and info, but also good presentation and sound quality. Every video is a gem
Kevin,
I'm just learning CSS, and your videos are SO encouraging and refreshing! Thank you for making it all so approachable!
❤
It's so satisfying to find teacher with so much passion to teach. It's the best education anyone can get.
Thanks so much!
Your timing could not be better! I literately just came to your channel to find this exact topic. Keep up the good work champion.
Man, I have been over two hours of crazy frustration trying to figure out what was going on (swearing for granted) with my background - image, and in ten minutes of your video I could find the solution. Its the Kevin thing making it easy to us. Again!...
The bonus tip of that "background-blend-mode" property was pretty cool!
I love when you go back to basics. Somehow it helps also to grasp advanced concepts that rely on this. Thanks!
Don't forget your , otherwise the browser doesn't load the image before the entire CSS file is loaded and parsed. This can be very slow; especially at 3G connections.
Thank you for your information ❤
I have used a container for the text with a dark semi transparent background. This allows the image to show through and also a darker patch for the lighter text to be displayed. It has the advantage of framing the text which I think is a great eye catching feature if done right. Just my little tip :) Great video again, well done.
you blew my mind with background-blend-mode, none of all the courses I've done mentioned it. How cool I found your video, thanks!!!
I hated working with CSS now I love it so much thanks to you
Thank you Kevin!
Kevin, I am so happy I came across with your channel. You do make people fall in love with css. It really makes me stay curious. Thank you!
Love your content, please keep it up! The way you explain things with such a calm and practicity from the most basic aspect is very conforting and encouraging for everyone, even if you're only looking for a quick fix or tip. ❣
Thank you so very much for explaining the path to use in the url(), because I was so frustrated and annoyed, nothing was working and I kept wondering why, but after writing my path the way you did it works absolutely fine, I'm really grateful thank you ❤
Thanks!
Thank you so much!
Brilliant video, thank you Kevin for all your hardwork. Your videos are really helpful for someone like me who is getting into web dev.
Thank you! I actually yelled out loud when you did the dot dot in the url because that's what I'd been missing all along.
I knew most of these except the blending part. It will be very helpful! Thank you!
I watched the entire video for the blend mode tag thank you man i love your content
Thank you so much, Kevin. I really really appreciate the care, attention to detail, and focus on best practices that you put into each of your videos.
Great video Kevin! This is exactly what i was looking for. Thank you!
First video that I watched, loved it, subscribed and reccomended to my friends.
Hi Kevin, First of all, I am not a comment-person at all. I detest commenting. But I just felt that, in this case, I had to make an exception. At first, I didn't even like your videos, but then I watched this one and a few others which convinced me that you're bloody good (if I may say so). I've just finished the first module of my Front-end development course. I've made all the mistakes that a beginner developer can make, and by the way that you mentioned not to do. I was struggling to put my end assignment together. And I was also binge-watching tutorials on UA-cam. However, this was one of the first videos that followed through by actually doing it. So much so that in my end-assignment I almost always used background-blend-mode for my hero images to make the text in the image more readable.
damn, that background-blend-mode is really working like a charm, thx Kevin !!!
Merci Beacoup! I have been on this since morning.😎. What a relief! Thank you, once again.
Sir, you just have earned a lifelong subscriber
A great instructor with great t-shirts!
Kevin is legit my CSS guardian angel. Thank you kev ❤️
Thanks to teach responsiveness at the same time. I was adding a heigh every time I added a background picture , now I know better.
Lol...I just had the path issue with your section styling video. Most important to double check those paths. And the inspect tip works very well. Thanks Kevin!
Thank you Kevin, you are always my go to guy for css.
Thanks Kevin, i was struggling with this recently and you made it super easy to understand 👍. Much love from South Africa
the image being outside the folder was my problem. thanks so much, you earned a new subscriber
Really cool videos well documented and explained for very beginner friendly. I found the trick on adding a default background color useful. Thanks for the tips!
Thank you so much for the last chapter of the video! I was searching for that since some hours ahaha
Thank you!
I watch some clips about this but your clip was full with all the information and that really help me!
Again Thank you!
Sir, you just earned a new subscriber. This video was so helpful!!! Thank you.
This worked incredibly well! I can finally play it thanks
Very helpful, and nicely explained! I am just getting into CSS, and just by pausing and peeking at your code I learned other additional things I did not know about. Maybe I should start to watch from the beginning of your series :D. Thank you very much
Background-blend-mode was pretty helpful!!
Clear like Data I love this channel
Thank you a lot! It helped me find the problem with my background image. Very detailed and clear explication.
Damn nice tutorial. Your videos are always helpful and useful. You are so good at teaching and just have an absolutely brilliant talent to convey complex knowledge in simple terms.
Thank you so much for all your videos.I wish you good health and hope you are happy.
You drop this...👑 KING
This gives me so many memories.
You are AMAZING! Great content and super clear. I think I am loving CSS! Thank you!
thank you Kevin for this video this was driving me nuts looking for a solution
what I was looking for is to make it sticky background , So i found out by using background-attachment:fixed; and it worked very nice , and for a tip u can make shade on your background using background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.921), rgba(255, 255, 255, 0.914) ), url(" ./ your url for the bg ");
And thank you kevin for the great work you are doing for make the web looking more aesthitic
Greatly appreciate your explanation and assistance! Thank you!
Thank you Kevin.
I was just saying this to someone who is stuck in adding width and height, telling them to use padding
Great video. Exactly what I needed. Thankyou.
Thank you for this video! You explained so well and saved my life :D
thank you so much for your detailed videos. I appreciate you!!
you saved my keyboard from being shattered you beautiful beautiful man
Thank you for recommending Firefox as the main browser for web design. I like your instruction too. It's easy to understand as I right now am a very experienced beginner to whatever the next step is as a ranking.
Hello Mr. Powell. Thank you so much for your videos. They have helped me a lot.
Suggestion that isn't specific to CSS, more general web development for beginners:
I noticed UA-cam is missing a single video or clear series of videos covering the steps/options for setting up a simple contact form for a website from start to finish on both front-end and back-end. Covering basic options like free, cheap, and premium tools for the backend could be an easy extra video topic that would be helpful to beginners.
there are a lot of talented artists out here, but I have trouble understanding some of them. . Glad-I-found-you {
wow. you just solve me problem now. thank you. I like your presentation style.
My god... saved my day practicing in VS code
Finally I'm able to resolve the problem regarding background image
Thank you so much sir 🤩
🔥🔥🔥🔥🔥✨✨😍🥰
Thank you so much!! It was very helpful!!!👍🏼🙏🏻
Thank you very much , now I will understand the functionality
The background image tutorial with HTML & CSS was very nice and simple. It was good. Thanks for shearing.
Thank you so much💙. Your video solved my biggest problem.
Nice tip about the blend mode.. I had no idea before that you could do that with css, though I knew about it from using it in Photoshop & Illustrator
So helpful as always. I tried the technique of the background-blend-mode and found that if one adds the alpha channel to the multiply blend mode color (I was using black HSLA ) one can obtain even further control of the 'darkness' buy adjusting the alpha value, i.e. hsl( 0 0 0 / .3); Indebted once again to you sir.
Finally someone prefer Firefox. :D
You are so good man. Thanks for making CSS fun at .
Awesome video and excellent teaching
Thanks a lot Kevin ♥️.
The video I didnt know I was looking for ^
Kevin...all your recent videos are solving my problems 🥺
I need to check the past ones too
Helped me so much thank you, thumbs up
You are doing great videos, with great explanations that are extremely useful for real life projects. Amazing work.
My only question regarding this video is this: for how big monitors you must choose an image for?
If one person has ultrawide 4k screen, should we choose a background image that can stretch and fit to those screens also or we should use media queries with different images for bigger monitors or maybe we should stop and show only a background color after certain dimensions?
There is a multiple background images stacking order thing, by which you can use multiple backgrounds. It is useful for applying for example linear gradient (to control opacity of the background image).
Yeah, that can be really useful :)
Thank you again and again and again and again and again and again and again and again 😊
You explain verry well friend!
Bro Love your teaching so much THANK YOU CHOOOOOOOO Much
thank you so much for this Kevin !!!!
This is so much helpul for me Sir thank you for your tutorial
Good suggestions, thanks.
This is great, thank you!
Your videos are very helpful to me sir🎉🎉🎉❤❤❤
very helpful much appreciated .
Thank you very much!!
Hi Kevin thx a million just the video I was looking for very informative and good content.
Thank you Kevin, for helping me build a website for another man also named Kevin
OMG thanks you so muchh! I tried so many time to put a background-image 🤣
Kevin, thanks for helping me
Great video! Thanks a lot!
good video but i've got one point: my teacher said its not a good idea to place an image via css in the website because for SEO reasons. The search engine won't recognize that there's a picture hence for better SEO it's more advisable to put pictures in or tags since it will be seen as a picture
I love u, thanks for this video ❤❤
You are awesome sir 👏 through ur videos only I'm able to strong my front-end
спасибо, столько форумов перечитал, и только ты нормально объяснил!
thx
thank you so much 👍😊
this was soooooo useful to me
Thanks! Great video