Тёмный

Controlling background-images | CSS Tutorial 

Kevin Powell
Подписаться 913 тыс.
Просмотров 368 тыс.
50% 1

A deep dive into CSS background-image, including a look at background-size, background-repeat, and a deep dive into background-position.
/// Code
codepen.io/kevinpowell/pen/ab...
/// Chapters
00:00 - Introduction
01:07 - background-image basics
02:08 - background-repeat and size
03:49 - background-position with units
05:11 - background-position with keywords
05:46 - keywords with offsets
07:27 - controlling multiple background images
09:14 - background-size: cover
16:14 - outro
#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
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
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!

Опубликовано:

 

2 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 297   
@abdelmonemnaceur7776
@abdelmonemnaceur7776 3 года назад
Best CSS teacher ever!
@christianaltan4913
@christianaltan4913 3 года назад
confirming!
@paradox2k604
@paradox2k604 3 года назад
no man its Tayfun Erbilen in other words PROTOTURK :)
@bodhimisael5037
@bodhimisael5037 2 года назад
i dont mean to be so off topic but does someone know of a way to get back into an Instagram account? I was dumb forgot the account password. I would love any assistance you can give me
@rohanjimmy3510
@rohanjimmy3510 2 года назад
@Bodhi Misael instablaster =)
@bodhimisael5037
@bodhimisael5037 2 года назад
@Rohan Jimmy thanks so much for your reply. I got to the site on google and Im waiting for the hacking stuff atm. Seems to take quite some time so I will get back to you later with my results.
@KieCodes
@KieCodes 3 года назад
So many nice tricks in one video. That's what I call adding value! Great job!
@KevinPowell
@KevinPowell 3 года назад
Thanks, glad you enjoyed it :D
@soewaiyanaung
@soewaiyanaung 3 года назад
I was looking for this. Very helpful to me. Love your explaining.
@TheElkster
@TheElkster 3 года назад
I've struggled with background image placement for ages and have faffed around and wasted so much time gettimg them to look right when also trying to be responsive....This short tutorial has helped me no end! Thanks Kevin!!!
@abdula5272
@abdula5272 3 года назад
This is the course I have been looking for from a very long time, love your videos 💛
@asfets
@asfets 13 дней назад
Thank you so much for this tutorial, i was needing precise background image positioning. Always something to learn from you. The best CSS teacher indeed!
@abdula5272
@abdula5272 3 года назад
The king of css dropped another masterpiece, thank you so much ❤
@DumbSkippy
@DumbSkippy 3 года назад
Oh crap. I spent a night wondering why the image wouldn't display in the bg... It was an empty div. Thanks Kev. I love your stuff!!!
@abicinemafood
@abicinemafood 3 года назад
I never get bored while watching your videos. They are really fun!
@andreainvernizzi8510
@andreainvernizzi8510 2 года назад
I am onto an assignment and I found this content very helpfull, very well explained with a clear pronunciation. Thank you Kevin
@MzTeeL
@MzTeeL Год назад
Thank you so much! The level of frustration I’ve had for weeks was resolved within the first 3:11 of your video 💆🏾‍♀️
@nro337
@nro337 3 года назад
Thank you for the detail of this video. This is really fascinating!
@avroml
@avroml 3 года назад
Excellent content as always, Kevin. Thanks mate!
@nitram_nosnibor
@nitram_nosnibor 3 года назад
Another SUPERB video there Kevin, and another one for my CSS toolbox - thank you.
@deanhantzis9630
@deanhantzis9630 2 года назад
Nice pace and plethora of examples. Excellent tutorial. Thanks.
@ss4717
@ss4717 3 года назад
WOW you are playing the hits this month!!! don't stop thank you!
@rperez4852
@rperez4852 Год назад
This video came right on time (after cracking my head for a few hours). Thanks Kevin!
@gideonokokoro5024
@gideonokokoro5024 3 года назад
Your teaching skills is so precise and coherent... Thank you so much!
@srishtichauhan2955
@srishtichauhan2955 2 года назад
Thank you , was struggling with some concepts while working, you made it easy
@dankierson
@dankierson 3 года назад
Another gem, KP. I was hoping you'd say something about sprites (big images made by tiling all normal ones - makes for quicker loading of images from the web server) and their manipulation.
@952a259
@952a259 8 месяцев назад
Kevin, thank you so much for your CSS lessons!
@skeetpurple2531
@skeetpurple2531 3 года назад
Thanks for all kevin, I really appreciate your content
@dr__ey
@dr__ey Год назад
this was such a great video as well !! thank you Kevin
@CarlitoeGames
@CarlitoeGames Год назад
This was just *Chefs Kiss* amazing. hitting all the buttons on your channel because of this.
@HigkeyRegarded007
@HigkeyRegarded007 Год назад
This was so awesome. Thank you so much for this!
@robbiegeiss7090
@robbiegeiss7090 Год назад
you're so helpful and easy to understand, i appreciate you!
@jlycurgus3244
@jlycurgus3244 Год назад
I appreciate this briefest of overviews! Thank you! I'm a streamer who knows NOTHING about programming! Lol! Also! I love your outro so much that I've subscribed to your channel "Don't forget to make your corner of the internet just a little more awesome!" LOVE IT!!! SUBSCRIBED!
@NanogalaxyOrgMedia
@NanogalaxyOrgMedia 2 года назад
That is awesome! Thanks for these wonderful tutorials!
@jeffb6291
@jeffb6291 3 года назад
just got it Kevin . Great info. Thanks again
@cerealrakist7360
@cerealrakist7360 3 года назад
I’m struggling with controlling a background video. You’re always close to my needs every show !!!! Css guru right here everybody🙌🏻 !! Oh @Kevin Powell btw 0.75x is my sweet spot when you’re zooming. It’s like your my kinda normal then lol. Otherwise I have to go drink 3 cups of coffee and then tell my dog to hold my beer I’m going for it on normal speed lol .. ty Kevin for your help and hard work..
@VirendraBG
@VirendraBG 9 месяцев назад
Where were you all these years? Such an awesome teacher you are! Respect from INDIA. 🙏🏻
@BanglaAudioBookbyZahan
@BanglaAudioBookbyZahan Год назад
Wow amazing. Needed this.
@bleulola
@bleulola 3 года назад
Thank you so much Kevin!!! Indeed it would be nice, if there is even more content with background-images such as background-attachment. Take care
@niklassoderberg2168
@niklassoderberg2168 3 года назад
I started watching you 5-6 weeks ago because you had a great video about a thing i needed to know then. Now i just watch because its fun and interesting. Nice vid Kevin. :D
@KevinPowell
@KevinPowell 3 года назад
So glad that you're sticking around and enjoying the content!
@josephgarza5973
@josephgarza5973 Год назад
Pretty cool tutorial. Thank you very much for dedicating some time to helping other newbies.
@movingforwardwithahad317
@movingforwardwithahad317 3 года назад
Thank You for saving loads of web-surfing time. Really generous and useful content.
@OrincyWhyteDesigns
@OrincyWhyteDesigns 2 года назад
You are such a good teacher !!! Holy shyt 👏🏾👏🏾👏🏾👏🏾👏🏾
@lillithdove2146
@lillithdove2146 Год назад
I am in my early stages of learning. You definitely were a life saver I stumbled upon, your videos explain the process so clearly! Thank you!
@ricardonog1
@ricardonog1 3 года назад
Learned so much watching your content, thanks for your videos
@coderamrin
@coderamrin 2 года назад
very helpful tutorial kevin. thanks for sharing
@ChrisMochinskiMusic
@ChrisMochinskiMusic 2 года назад
Thanks for always being so dang helpful!
@work9167
@work9167 2 года назад
Great! Your video helped me a lot.
@globalfunseeker6733
@globalfunseeker6733 3 года назад
Another wonderful video. Thanks so much for your time and effort. Kevin, do you begin every project with a "base css" file that you apply to each and every project? For example, margin and box-size settings, etc., If so, can you recommend any? Thanks.
@swarupusare9179
@swarupusare9179 3 года назад
big Fan of Kevin Powell he doing smart work for us -- "LOVE FROM INDIA"
@AmandaLucaseu
@AmandaLucaseu 3 года назад
Great video Kevin, thanks 😊
@owensieber1577
@owensieber1577 3 года назад
Thanks for great video my man.
@pramodkumarrana8178
@pramodkumarrana8178 2 года назад
Best class of the year ✨
@Ignite_Your_Spark
@Ignite_Your_Spark 2 года назад
Thank you Kevin, super helpful content..👍🏽
@daveskye
@daveskye 3 года назад
My Request: Custom Fonts Where to get fonts. Storing them on the website’s own server (for fastest and most reliable loading) and which font files types should be used for full browser support. Then how to setup with CSS. I can do this, but it would be good see best practice to check if I could do it a better way.
@segsfault
@segsfault 3 года назад
why so much informative videos have so much less views, Sir you're the best teacher
@codingwithlucy
@codingwithlucy 2 года назад
Thank you so much, this was really helpful :)
@arthur9490
@arthur9490 2 года назад
Thank you so much! You helped me a ton.
@carolmckay5152
@carolmckay5152 3 года назад
This is cool. Thanks dude.
@imjustaboredperson9116
@imjustaboredperson9116 28 дней назад
This helped me so much!!!
@kamasahdickson1549
@kamasahdickson1549 2 года назад
Wow...very helpful content am looking forward for more helpful videos like this.....I think with this video i now can center svgs behind images to my liking.
@iamalisborthis
@iamalisborthis 3 года назад
You are the best programmer bro!, keep it up and so nice bro!
@rajkiranchaudhary8769
@rajkiranchaudhary8769 2 года назад
Thank you. It is a wonderful tutorial..
@colinjones8265
@colinjones8265 2 года назад
love love love LOVED this video
@FarhanaTasneemB
@FarhanaTasneemB 3 года назад
You are the best and your videos are life saver. ❤️
@joshuamensah9309
@joshuamensah9309 6 месяцев назад
Absolute legend 👑
@ignaciosalia1952
@ignaciosalia1952 3 года назад
This just help in a project for an interview, thank you
@KevinPowell
@KevinPowell 3 года назад
Awesome!
@pcrackenhead
@pcrackenhead 3 года назад
Something cool I did with background images recently uses a bunch of the things you talked about here. I had a design where there were borders on elements that didn't go the entire width of the container. So instead of using pseudo-elements, or border image I used linear-gradient as a background, and used background-size to make it not go the full width of the box. Something like: background-image: linear-gradient(black, black); background-position: bottom left; background-size: 60% 2px; background-repeat: no-repeat; Now no matter how big the box is, it'll have what looks like a border going partway through the element. You can also combine it with multiple background images, so there's one partial border on the left, and one on the bottom.
@KevinPowell
@KevinPowell 3 года назад
Cool idea!
@SymyonYY
@SymyonYY Год назад
One thing I will add in the video to be complete is how percentage works differently than lengths (px, em etc). In that the anchoring point of the image is different, kinda floating with every percentage change. It's an important enough information that may confuse a lot of people at first.
@ComesThenGoes75
@ComesThenGoes75 3 года назад
Hello Kevin. I would love to find out how to control the scrolling behavior on parallax images. I have not worked with parallax a lot, but I am noticing where the view of the image starts at the very bottom and as you scroll down the page, the view of the image moves from the bottom to the top. I would prefer the opposite to happen. How do you recommend reversing the current scrolling behavior?
@raquelcampos2096
@raquelcampos2096 Год назад
Thanks for this tutorial.
@mercymerlin927
@mercymerlin927 3 месяца назад
it was very helpful, sir🥰
@nataliabujnowicz1454
@nataliabujnowicz1454 3 года назад
Many thanks for this video, many strange issues with background-images are clear now. BTW, you look awesome in these glasses: D
@KevinPowell
@KevinPowell 3 года назад
Glad you liked the video, and the glasses 😃
@minthukyaw8451
@minthukyaw8451 3 года назад
keep the great work thank u
@wizhippo
@wizhippo 3 года назад
Layering backgrounds can be fun. How about adding the common image overlay without a pseudo element or a dedicated overlay element.
@blackcatdev
@blackcatdev 3 года назад
Hi Kevin, as always, thank you for great video! It would be cool if you can also show some examples how to deal with multiple fullscreen backgrounds. E.g. build some simple website with few text containers and add 3-4 1920x1080 backgrounds one below the other (or some big images in different sizes to add a bit of complexity) and then show how to control background and text container on responsive website.
@KevinPowell
@KevinPowell 3 года назад
Thanks for the suggestion! Could be fun, sounds like something maybe with scroll-snap type stuff could be useful.
@programmingweb5250
@programmingweb5250 3 года назад
Saying once again, Thank you sir 👍
@wryyy2211
@wryyy2211 2 года назад
Thank you soooo much !!!🔥🔥🔥🔥
@aebek1413
@aebek1413 2 года назад
I really like you kevin you are an amazing teacher
@upwlqwp
@upwlqwp Год назад
Thank you so much You really help me
@Abhianiket
@Abhianiket 9 месяцев назад
Thank you so much sir ❤😍
@jericovalino4976
@jericovalino4976 3 года назад
I'm early again. Thanks for this!
@sayantanmanna1360
@sayantanmanna1360 2 года назад
thanks it was very helpful
@RubberDuckCoding
@RubberDuckCoding 2 года назад
VERY NICE!
@danielChibuogwu
@danielChibuogwu Год назад
love this guy😂💯
@bimaltwayana2058
@bimaltwayana2058 2 года назад
This is awesome
@andrew.schaeffer4032
@andrew.schaeffer4032 2 года назад
Thanks for the great video! Question - Is there a way to take an image that is background: cover and zoom in on it with css? Thanks!
@luisangelacunag9949
@luisangelacunag9949 Год назад
Muchas gracias amigo, me ayudaste para darle solución. ¡Saludos desde Perú!
@braveitor
@braveitor 3 года назад
Nice explanations as always, Kevin. As a suggestion, although I've been working with css for a few years, in one project I had to finish for a client not so long ago, they were using border-image for making quite ellaborated frames for floating content, just using one image, taking part of that image to repeat horizontally and vertically, and also using some parts of the image as decoration. I had never used or seen something like that, but it was really useful for having just one image for variable sized floating info messages. Maybe you could do a video about it. Thanks!
@verakorchemnaya3971
@verakorchemnaya3971 2 года назад
Good video. Thank you
@the_kickers_of_the_coconut6375
@the_kickers_of_the_coconut6375 3 года назад
awesome thanks!!
@Samsung-ur9ei
@Samsung-ur9ei 2 года назад
thank you so much sir
@silviadl136
@silviadl136 3 года назад
Great video Kevin! Could it be possible to make a video about opacity in the background images in order to read correctly the text? Thank you!!
@shishirtiwari6484
@shishirtiwari6484 3 года назад
Me : Kevin you dropped something Kevin : what ? Me : A Masterpiece
@aglowkeys
@aglowkeys 3 года назад
Thank you Kevin! This was great. Could it be possible for you to make a video talking about accessibility? I believe you said you aren't an expert on it, but maybe you could teach us some basic things regarding aria roles and how screen readers work!
@KevinPowell
@KevinPowell 3 года назад
I've got something in the works with someone who is an expert :)
@fabriziofilograna6498
@fabriziofilograna6498 3 года назад
Thanks for sharing
@fallenChampionn
@fallenChampionn Год назад
nice video!
@cerealrakist7360
@cerealrakist7360 3 года назад
Omg me at 1:52 👀🥴🤯🤦🏻‍♀️ I can’t believe it was that easy all along ! Lol
@cholst1
@cholst1 Год назад
So not defining position for each of the background layers was why the background image and my gradiant layers would move out of wack. Finally! Thank you! Haha.
@DANIAL_GH
@DANIAL_GH Год назад
Thank you so much for this wonderful video You solved my problem😍😍😍😍😍😍👍👍👍👍👌👌👌👌✨✨
@shrirambalaji2915
@shrirambalaji2915 Год назад
Thank you😁
@MarcosAF9
@MarcosAF9 Год назад
salvou demais paezao
@argenisaguilar9045
@argenisaguilar9045 3 года назад
Great..thanks so much...
@osmdrcn8076
@osmdrcn8076 2 года назад
thank you!
@rileypaulsen
@rileypaulsen 3 года назад
Where in the world has that second offset property for background-position been my entire career‽ Amazing.
@KevinPowell
@KevinPowell 3 года назад
I was *so* happy when I found out about it, lol. I just wish it would work based off 'center' as well.
@elbanowilliamprovenzalilar8800
@elbanowilliamprovenzalilar8800 2 года назад
super nice
Далее
Avoid These 5 Awful CSS Mistakes
20:42
Просмотров 188 тыс.
Arigato !! 😂
00:11
Просмотров 3,2 млн
Backstage or result?😈🔥 @milanaroller
00:12
Просмотров 8 млн
A better image reset for your CSS
11:16
Просмотров 105 тыс.
Learn CSS Position In 9 Minutes
9:26
Просмотров 1,9 млн
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 892 тыс.
#26 CSS Backgrounds - CSS Full Tutorial
12:36
Просмотров 42 тыс.
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 51 тыс.
The 6 most important CSS concepts for beginners
28:58
Просмотров 149 тыс.
Arigato !! 😂
00:11
Просмотров 3,2 млн