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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[imheretofiremylazeh]

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

[lizflaggswope]

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

[nathanwatts]

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

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

[johannarodriguez]

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

[BenjaminAster]

Don't forget your <link rel="preload" as="image" href="./whatever.png" />, 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.

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

[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. <3

[MartynKoi]

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.

[bukkorossu]

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

[reginamurguia]

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

[nataliadi]

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!

[Fahimurr]

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

[janman]

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

[abdulrhman]

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

[eriklindestad]

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.

[JavierD]

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

[gundi]

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

[swallowedinthesea]

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

[Ana-smnv]

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