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: https://www.youtube.com/watch?v=JVsI0fspik8&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=9
/>✅ Why you should use Firefox when learning CSS: https://www.youtube.com/watch?v=a-V8GFtwjos
/>✅ How I update the browser on save: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
/>✅ How to control your background-images: https://youtu.be/3T_Jy1CqH9k
⌚ 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
💬 https://discord.gg/nTYCvrK
Keep up to date with everything I’m up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss
—
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell
—
My editor: VS Code – https://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 YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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!
merci monsieur like
Good suggestions, thanks.
Hello Professor, I like your content, now I am part of it too, hehehe, I have a question that I have not been able to solve, I am making a web page, which has something like 8 "slides" on the vertical scrolling scrooll, I am using bootstrap because that's what they asked me, sorry teacher I'm new, I'm doing my professional internship for the tenth semester of my professional career and I'm just learning a lot of things, look, each "slide" has an image as a background, but some of these images have a zig-gag border, which I must superimpose on another image, and I have been trying to make them fit for more than a week and I have not been able to, do you think you could guide me please? Thank you very much for reading me Professor and an apology because I am using the translator. Greetings from Puebla Mexico.
awesome sir…..
I've been trying to get my background image to show for two days, and even after following this tutorial, cannot get it to work! It works fine in a sample index.html file and styles.css file when I follow along with your video, but in the website I'm trying to rebuild, it just won't work at all…. :/