Background images with HTML & CSS

In this video, I look at how to set a background image, problems people run into with them and how to fix them, and finish things off with a bonus tip on readability.
🔗 Links
✅ How to select things in your CSS: • HTML & CSS for Beginne...
✅ Why you should use Firefox when learning CSS: • Stop using Chrome if y...
✅ How I update the browser on save: marketplace.visualstudio.com/...
✅ How to control your background-images: • Controlling background...
⌚ Timestamps
00:00 - Introduction
00:47 - Don't have the images in your HTML
01:29 - Use an external CSS file
03:45 - Linking a background image in an external CSS file
05:58 - Fallback background-color
06:45 - Don't use heights
08:21 - When the image doesn't show up
10:43 - background-repeat
12:26 - When an image is too big
14:36 - Making an image fit
16:59 - BONUS - making the text readable
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZread channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 225

  • @imheretofiremylazeh
    @imheretofiremylazeh2 жыл бұрын

    Not only good content and info, but also good presentation and sound quality. Every video is a gem

  • @lizflaggswope4747
    @lizflaggswope47472 жыл бұрын

    Kevin, I'm just learning CSS, and your videos are SO encouraging and refreshing! Thank you for making it all so approachable!

  • @SalmonbekAkbarov-jx2ei

    @SalmonbekAkbarov-jx2ei

    9 ай бұрын

  • @nathanwatts76
    @nathanwatts762 жыл бұрын

    Your timing could not be better! I literately just came to your channel to find this exact topic. Keep up the good work champion.

  • @albertoa.r.5995
    @albertoa.r.59952 жыл бұрын

    I love when you go back to basics. Somehow it helps also to grasp advanced concepts that rely on this. Thanks!

  • @BenjaminAster
    @BenjaminAster2 жыл бұрын

    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.

  • @hanaasaiid9337

    @hanaasaiid9337

    Жыл бұрын

    Thank you for your information ❤

  • @reginamurguia4078
    @reginamurguia4078 Жыл бұрын

    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. ❣

  • @justpeachyrl
    @justpeachyrl Жыл бұрын

    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.

  • @nataliadi9
    @nataliadi92 жыл бұрын

    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!

  • @johannarodriguez3573
    @johannarodriguez3573 Жыл бұрын

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

  • @Fahimurr
    @Fahimurr2 жыл бұрын

    Brilliant video, thank you Kevin for all your hardwork. Your videos are really helpful for someone like me who is getting into web dev.

  • @MartynKoi
    @MartynKoi2 жыл бұрын

    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.

  • @IamPetrus
    @IamPetrus Жыл бұрын

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

  • @bukkorossu
    @bukkorossu2 жыл бұрын

    The bonus tip of that "background-blend-mode" property was pretty cool!

  • @janman7419
    @janman7419 Жыл бұрын

    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

  • @Ana-sm2nv
    @Ana-sm2nv Жыл бұрын

    You are AMAZING! Great content and super clear. I think I am loving CSS! Thank you!

  • @Cocodrillo3011
    @Cocodrillo30118 ай бұрын

    Great video Kevin! This is exactly what i was looking for. Thank you!

  • @fabianpetersen2452
    @fabianpetersen24522 жыл бұрын

    Thanks Kevin, i was struggling with this recently and you made it super easy to understand 👍. Much love from South Africa

  • @swallowedinthesea11
    @swallowedinthesea11 Жыл бұрын

    I knew most of these except the blending part. It will be very helpful! Thank you!

  • @abdulrhman2514
    @abdulrhman25142 жыл бұрын

    I hated working with CSS now I love it so much thanks to you Thank you Kevin!

  • @gundi0012
    @gundi0012 Жыл бұрын

    I watched the entire video for the blend mode tag thank you man i love your content

  • @robynrooiland421
    @robynrooiland421 Жыл бұрын

    First video that I watched, loved it, subscribed and reccomended to my friends.

  • @andreyovedenie
    @andreyovedenie Жыл бұрын

    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!

  • @eriklindestad9268
    @eriklindestad926810 ай бұрын

    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.

  • @mercedes7761
    @mercedes7761 Жыл бұрын

    thank you so much for your detailed videos. I appreciate you!!

  • @frosty8104
    @frosty8104 Жыл бұрын

    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

  • @Space_Curious
    @Space_Curious3 ай бұрын

    Thank you so much for the last chapter of the video! I was searching for that since some hours ahaha

  • @SeviersKain
    @SeviersKain Жыл бұрын

    damn, that background-blend-mode is really working like a charm, thx Kevin !!!

  • @aleksandraurban7867
    @aleksandraurban7867 Жыл бұрын

    Thank you for this video! You explained so well and saved my life :D

  • @Control4Daze
    @Control4Daze2 ай бұрын

    Greatly appreciate your explanation and assistance! Thank you!

  • @annanagalina3567
    @annanagalina35676 ай бұрын

    Thank you a lot! It helped me find the problem with my background image. Very detailed and clear explication.

  • @Locklesh
    @Locklesh Жыл бұрын

    Great video. Exactly what I needed. Thankyou.

  • @aleksandrasocha9508
    @aleksandrasocha9508 Жыл бұрын

    This worked incredibly well! I can finally play it thanks

  • @patrickmcnelis1520
    @patrickmcnelis1520 Жыл бұрын

    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!

  • @bogdandanila6306
    @bogdandanila6306 Жыл бұрын

    Thank you so much for all your videos.I wish you good health and hope you are happy.

  • @kodeshare6273
    @kodeshare62735 ай бұрын

    Thank you Kevin, you are always my go to guy for css.

  • @archibaldsimms7440
    @archibaldsimms74404 ай бұрын

    Hello Mr. Powell. Thank you so much for your videos. They have helped me a lot.

  • @abrahamomorogieva8533
    @abrahamomorogieva8533 Жыл бұрын

    the image being outside the folder was my problem. thanks so much, you earned a new subscriber

  • @JavierD
    @JavierD2 жыл бұрын

    It's so satisfying to find teacher with so much passion to teach. It's the best education anyone can get.

  • @KevinPowell

    @KevinPowell

    2 жыл бұрын

    Thanks so much!

  • @weareloved
    @weareloved Жыл бұрын

    Thank you so much!! It was very helpful!!!👍🏼🙏🏻

  • @Webtricker
    @Webtricker2 жыл бұрын

    The background image tutorial with HTML & CSS was very nice and simple. It was good. Thanks for shearing.

  • @christopherkagan3242
    @christopherkagan3242Ай бұрын

    A great instructor with great t-shirts!

  • @Coco-ii2pu
    @Coco-ii2pu Жыл бұрын

    Kevin is legit my CSS guardian angel. Thank you kev ❤️

  • @raquelcampos2096
    @raquelcampos2096 Жыл бұрын

    Thanks to teach responsiveness at the same time. I was adding a heigh every time I added a background picture , now I know better.

  • @airNfinger
    @airNfinger8 ай бұрын

    Sir, you just earned a new subscriber. This video was so helpful!!! Thank you.

  • @DanteMishima
    @DanteMishima2 жыл бұрын

    Thank you Kevin. I was just saying this to someone who is stuck in adding width and height, telling them to use padding

  • @devprollc
    @devprollc Жыл бұрын

    The video I didnt know I was looking for ^

  • @chichangchmarak8678
    @chichangchmarak86782 жыл бұрын

    Good suggestions, thanks.

  • @kubolavicka6043
    @kubolavicka60437 ай бұрын

    Helped me so much thank you, thumbs up

  • @kyingawa
    @kyingawa Жыл бұрын

    wow. you just solve me problem now. thank you. I like your presentation style.

  • @sandaki7134
    @sandaki71347 ай бұрын

    Thank you so much💙. Your video solved my biggest problem.

  • @zedricksalupito
    @zedricksalupito11 ай бұрын

    Clear like Data I love this channel

  • @martnb8219
    @martnb8219 Жыл бұрын

    Great video! Thanks a lot!

  • @jonks5913
    @jonks5913 Жыл бұрын

    thank you Kevin for this video this was driving me nuts looking for a solution

  • @uchennaonyejeme9221
    @uchennaonyejeme9221 Жыл бұрын

    Thank you very much , now I will understand the functionality

  • @gokturkbuyuktuna8557
    @gokturkbuyuktuna85574 ай бұрын

    Background-blend-mode was pretty helpful!!

  • @thewise3551
    @thewise35512 ай бұрын

    Cheers dude, Helped!

  • @daskeds
    @daskeds2 жыл бұрын

    Sir, you just have earned a lifelong subscriber

  • @anonymous_basics
    @anonymous_basics Жыл бұрын

    very helpful much appreciated .

  • @isaacsotelo467
    @isaacsotelo4672 жыл бұрын

    You drop this...👑 KING

  • @estudiolo
    @estudiolo Жыл бұрын

    This is great, thank you!

  • @JackFate76
    @JackFate762 жыл бұрын

    This gives me so many memories.

  • @MikeHerzog_de
    @MikeHerzog_de2 жыл бұрын

    Another nice tool to have in your box for legibility is `text-shadow`. In the white-text example from the video, I'd go with some dark color taken from the background image.

  • @alejovillores6373
    @alejovillores63732 жыл бұрын

    Thanks! Great video

  • @marshlinejefthas5109
    @marshlinejefthas51092 жыл бұрын

    Hi Kevin thx a million just the video I was looking for very informative and good content.

  • @yankeesfan3961
    @yankeesfan3961 Жыл бұрын

    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.

  • @dr__ey
    @dr__ey2 жыл бұрын

    thank you so much for this Kevin !!!!

  • @abdulhadi_53
    @abdulhadi_53 Жыл бұрын

    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

  • @priyadharshansenthil7343
    @priyadharshansenthil73432 жыл бұрын

    You are awesome sir 👏 through ur videos only I'm able to strong my front-end

  • @mofe620
    @mofe6202 жыл бұрын

    Kevin...all your recent videos are solving my problems 🥺 I need to check the past ones too

  • @alexandrosdimiropoulos4768
    @alexandrosdimiropoulos47682 жыл бұрын

    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?

  • @ruszelsaavedra1647
    @ruszelsaavedra1647 Жыл бұрын

    This is so much helpul for me Sir thank you for your tutorial

  • @arg5
    @arg5 Жыл бұрын

    Finally I'm able to resolve the problem regarding background image Thank you so much sir 🤩 🔥🔥🔥🔥🔥✨✨😍🥰

  • @brettlaby4578
    @brettlaby45786 ай бұрын

    there are a lot of talented artists out here, but I have trouble understanding some of them. . Glad-I-found-you {

  • @wargalevente
    @wargalevente4 ай бұрын

    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 KZread. 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.

  • @mrprogo2633
    @mrprogo2633 Жыл бұрын

    this was soooooo useful to me

  • @arthur.poupart2125
    @arthur.poupart2125 Жыл бұрын

    You explain verry well friend!

  • @davidactis7850
    @davidactis78509 ай бұрын

    Awesome video and excellent teaching

  • @RamJairam1
    @RamJairam15 ай бұрын

    Bro Love your teaching so much THANK YOU CHOOOOOOOO Much

  • @isaacqadri
    @isaacqadri2 жыл бұрын

    Thanks a lot Kevin ♥️.

  • @applesoda77
    @applesoda77 Жыл бұрын

    thank you man fr

  • @gio_adventurelm1578
    @gio_adventurelm1578 Жыл бұрын

    OMG thanks you so muchh! I tried so many time to put a background-image 🤣

  • @ElementoryMyDearWatson
    @ElementoryMyDearWatsonАй бұрын

    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.

  • @user-fo1mq7ox6g
    @user-fo1mq7ox6g21 күн бұрын

    Thank you again and again and again and again and again and again and again and again 😊

  • @republicofserbia
    @republicofserbia Жыл бұрын

    Kevin, thanks for helping me

  • @DilinyerCR
    @DilinyerCR2 жыл бұрын

    Thank you very much!!

  • @nucleoinfinito9542
    @nucleoinfinito9542 Жыл бұрын

    I love u, thanks for this video ❤❤

  • @iq-dev
    @iq-dev Жыл бұрын

    You are so good man. Thanks for making CSS fun at .

  • @ZaeemKhaliqAwan
    @ZaeemKhaliqAwan2 жыл бұрын

    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).

  • @KevinPowell

    @KevinPowell

    2 жыл бұрын

    Yeah, that can be really useful :)

  • @FFAs
    @FFAs2 жыл бұрын

    Suggestion that isn't specific to CSS, more general web development for beginners: I noticed KZread 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.

  • @BadGirl-pn3qu
    @BadGirl-pn3qu7 ай бұрын

    Thank you so much 🙂

  • @jashuva1239
    @jashuva1239 Жыл бұрын

    Your videos are very helpful to me sir🎉🎉🎉❤❤❤

  • @domagojhamzic9892
    @domagojhamzic9892 Жыл бұрын

    Thank you, Sir :)

  • @logger00
    @logger003 ай бұрын

    thank you man

  • @alexahong
    @alexahong2 жыл бұрын

    you are a genius!

  • @a99986
    @a9998611 ай бұрын

    Legend Just Legend

  • @ritiksingh6400
    @ritiksingh64002 жыл бұрын

    awesome sir.....

  • @sillyways4610
    @sillyways46104 ай бұрын

    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

  • @Sanjaya-du1uw
    @Sanjaya-du1uw Жыл бұрын

    thank you so much 👍😊

  • @plexor-dev
    @plexor-dev2 жыл бұрын

    Cool, i see that trick background-blend-mode, a few months ago on Twitter.

  • @sumansah00
    @sumansah002 жыл бұрын

    it's such a good and informative video