Controlling background-images | CSS Tutorial

Sdílet
Vložit
  • čas přidán 25. 07. 2024

Komentáře • 298

  • @abdelmonemnaceur7776
    @abdelmonemnaceur7776 Před 3 lety +188

    Best CSS teacher ever!

    • @christianaltan4913
      @christianaltan4913 Před 3 lety +5

      confirming!

    • @paradox2k604
      @paradox2k604 Před 3 lety +2

      no man its Tayfun Erbilen in other words PROTOTURK :)

    • @bodhimisael5037
      @bodhimisael5037 Před 2 lety +1

      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 Před 2 lety

      @Bodhi Misael instablaster =)

    • @bodhimisael5037
      @bodhimisael5037 Před 2 lety

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

  • @soewaiyanaung
    @soewaiyanaung Před 3 lety +10

    I was looking for this. Very helpful to me.
    Love your explaining.

  • @KieCodes
    @KieCodes Před 3 lety +39

    So many nice tricks in one video. That's what I call adding value! Great job!

  • @abdula5272
    @abdula5272 Před 3 lety

    This is the course I have been looking for from a very long time, love your videos 💛

  • @TheElkster
    @TheElkster Před 3 lety +8

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

  • @DumbSkippy
    @DumbSkippy Před 3 lety +15

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

  • @nro337
    @nro337 Před 3 lety +2

    Thank you for the detail of this video. This is really fascinating!

  • @abicinemafood
    @abicinemafood Před 3 lety +1

    I never get bored while watching your videos. They are really fun!

  • @abdula5272
    @abdula5272 Před 3 lety +21

    The king of css dropped another masterpiece, thank you so much ❤

  • @avroml
    @avroml Před 3 lety +1

    Excellent content as always, Kevin. Thanks mate!

  • @nitram_nosnibor
    @nitram_nosnibor Před 3 lety

    Another SUPERB video there Kevin, and another one for my CSS toolbox - thank you.

  • @deanhantzis9630
    @deanhantzis9630 Před 2 lety +1

    Nice pace and plethora of examples. Excellent tutorial. Thanks.

  • @lillithdove2146
    @lillithdove2146 Před 2 lety

    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!

  • @asfets
    @asfets Před 2 měsíci

    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!

  • @gideonokokoro5024
    @gideonokokoro5024 Před 3 lety

    Your teaching skills is so precise and coherent... Thank you so much!

  • @ss4717
    @ss4717 Před 3 lety

    WOW you are playing the hits this month!!! don't stop thank you!

  • @robbiegeiss7090
    @robbiegeiss7090 Před rokem

    you're so helpful and easy to understand, i appreciate you!

  • @952a259
    @952a259 Před 10 měsíci

    Kevin, thank you so much for your CSS lessons!

  • @MzTeeL
    @MzTeeL Před 2 lety

    Thank you so much! The level of frustration I’ve had for weeks was resolved within the first 3:11 of your video 💆🏾‍♀️

  • @srishtichauhan2955
    @srishtichauhan2955 Před 2 lety

    Thank you , was struggling with some concepts while working, you made it easy

  • @rperez4852
    @rperez4852 Před rokem

    This video came right on time (after cracking my head for a few hours). Thanks Kevin!

  • @andreainvernizzi8510
    @andreainvernizzi8510 Před 2 lety

    I am onto an assignment and I found this content very helpfull, very well explained with a clear pronunciation. Thank you Kevin

  • @CarlitoeGames
    @CarlitoeGames Před rokem

    This was just *Chefs Kiss* amazing. hitting all the buttons on your channel because of this.

  • @dr__ey
    @dr__ey Před 2 lety

    this was such a great video as well !! thank you Kevin

  • @HigkeyRegarded007
    @HigkeyRegarded007 Před 2 lety

    This was so awesome. Thank you so much for this!

  • @niklassoderberg2168
    @niklassoderberg2168 Před 3 lety +1

    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  Před 3 lety

      So glad that you're sticking around and enjoying the content!

  • @skeetpurple2531
    @skeetpurple2531 Před 3 lety

    Thanks for all kevin, I really appreciate your content

  • @dankierson
    @dankierson Před 3 lety +5

    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.

  • @jlycurgus3244
    @jlycurgus3244 Před rokem

    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 Před 3 lety

    That is awesome! Thanks for these wonderful tutorials!

  • @daveskye
    @daveskye Před 3 lety +15

    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.

  • @bleulola
    @bleulola Před 3 lety

    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

  • @jeffb6291
    @jeffb6291 Před 3 lety

    just got it Kevin . Great info. Thanks again

  • @josephgarza5973
    @josephgarza5973 Před 2 lety

    Pretty cool tutorial. Thank you very much for dedicating some time to helping other newbies.

  • @BanglaAudioBookbyZahan

    Wow amazing. Needed this.

  • @ricardonog1
    @ricardonog1 Před 3 lety

    Learned so much watching your content, thanks for your videos

  • @movingforwardwithahad317

    Thank You for saving loads of web-surfing time. Really generous and useful content.

  • @work9167
    @work9167 Před 2 lety +1

    Great! Your video helped me a lot.

  • @ChrisMochinskiMusic
    @ChrisMochinskiMusic Před 2 lety

    Thanks for always being so dang helpful!

  • @OrincyWhyteDesigns
    @OrincyWhyteDesigns Před 2 lety

    You are such a good teacher !!! Holy shyt 👏🏾👏🏾👏🏾👏🏾👏🏾

  • @ignaciosalia1952
    @ignaciosalia1952 Před 3 lety +2

    This just help in a project for an interview, thank you

  • @kamasahdickson1549
    @kamasahdickson1549 Před 2 lety

    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.

  • @coderamrin
    @coderamrin Před 2 lety

    very helpful tutorial kevin. thanks for sharing

  • @pramodkumarrana8178
    @pramodkumarrana8178 Před 2 lety +1

    Best class of the year ✨

  • @colinjones8265
    @colinjones8265 Před 3 lety

    love love love LOVED this video

  • @joshuamensah9309
    @joshuamensah9309 Před 8 měsíci

    Absolute legend 👑

  • @owensieber1577
    @owensieber1577 Před 3 lety

    Thanks for great video my man.

  • @Ignite_Your_Spark
    @Ignite_Your_Spark Před 2 lety

    Thank you Kevin, super helpful content..👍🏽

  • @imjustaboredperson9116
    @imjustaboredperson9116 Před 2 měsíci

    This helped me so much!!!

  • @arthur9490
    @arthur9490 Před 2 lety

    Thank you so much! You helped me a ton.

  • @codingwithlucy
    @codingwithlucy Před 2 lety

    Thank you so much, this was really helpful :)

  • @AmandaLucaseu
    @AmandaLucaseu Před 3 lety

    Great video Kevin, thanks 😊

  • @carolmckay5152
    @carolmckay5152 Před 3 lety

    This is cool. Thanks dude.

  • @swarupusare
    @swarupusare Před 3 lety +3

    big Fan of Kevin Powell he doing smart work for us -- "LOVE FROM INDIA"

  • @nataliabujnowicz1454
    @nataliabujnowicz1454 Před 3 lety

    Many thanks for this video, many strange issues with background-images are clear now. BTW, you look awesome in these glasses: D

    • @KevinPowell
      @KevinPowell  Před 3 lety +2

      Glad you liked the video, and the glasses 😃

  • @cerealrakist7360
    @cerealrakist7360 Před 3 lety

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

  • @FarhanaTasneemB
    @FarhanaTasneemB Před 3 lety

    You are the best and your videos are life saver. ❤️

  • @VirendraBG
    @VirendraBG Před 11 měsíci

    Where were you all these years?
    Such an awesome teacher you are!
    Respect from INDIA. 🙏🏻

  • @rajkiranchaudhary8769
    @rajkiranchaudhary8769 Před 3 lety

    Thank you. It is a wonderful tutorial..

  • @mareleene
    @mareleene Před 3 lety

    You are the best programmer bro!, keep it up and so nice bro!

  • @segsfault
    @segsfault Před 3 lety +1

    why so much informative videos have so much less views,
    Sir you're the best teacher

  • @blackcatdev
    @blackcatdev Před 3 lety +7

    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  Před 3 lety +4

      Thanks for the suggestion! Could be fun, sounds like something maybe with scroll-snap type stuff could be useful.

  • @wizhippo
    @wizhippo Před 3 lety +5

    Layering backgrounds can be fun. How about adding the common image overlay without a pseudo element or a dedicated overlay element.

  • @minthukyaw8451
    @minthukyaw8451 Před 3 lety

    keep the great work
    thank u

  • @wryyy2211
    @wryyy2211 Před 2 lety

    Thank you soooo much !!!🔥🔥🔥🔥

  • @globalfunseeker6733
    @globalfunseeker6733 Před 3 lety +1

    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.

  • @raquelcampos2096
    @raquelcampos2096 Před rokem

    Thanks for this tutorial.

  • @RubberDuckCoding
    @RubberDuckCoding Před 2 lety +1

    VERY NICE!

  • @upwlqwp
    @upwlqwp Před rokem

    Thank you so much
    You really help me

  • @bimaltwayana2058
    @bimaltwayana2058 Před 2 lety

    This is awesome

  • @the_kickers_of_the_coconut6375

    awesome thanks!!

  • @aebek1413
    @aebek1413 Před 2 lety +1

    I really like you kevin you are an amazing teacher

  • @pcrackenhead
    @pcrackenhead Před 3 lety

    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.

  • @danielChibuogwu
    @danielChibuogwu Před rokem

    love this guy😂💯

  • @mercymerlin927
    @mercymerlin927 Před 4 měsíci

    it was very helpful, sir🥰

  • @braveitor
    @braveitor Před 3 lety +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!

  • @Abhianiket
    @Abhianiket Před 11 měsíci

    Thank you so much sir ❤😍

  • @ComesThenGoes75
    @ComesThenGoes75 Před 3 lety +1

    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?

  • @SymyonYY
    @SymyonYY Před 2 lety +1

    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.

  • @fabriziofilograna6498
    @fabriziofilograna6498 Před 3 lety

    Thanks for sharing

  • @sayantanmanna1360
    @sayantanmanna1360 Před 2 lety

    thanks it was very helpful

  • @luisangelacunag9949
    @luisangelacunag9949 Před rokem

    Muchas gracias amigo, me ayudaste para darle solución. ¡Saludos desde Perú!

  • @Samsung-ur9ei
    @Samsung-ur9ei Před 3 lety

    thank you so much sir

  • @silviadl136
    @silviadl136 Před 3 lety

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

  • @aglowkeys
    @aglowkeys Před 3 lety +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  Před 3 lety +3

      I've got something in the works with someone who is an expert :)

  • @verakorchemnaya3971
    @verakorchemnaya3971 Před 2 lety

    Good video. Thank you

  • @shrirambalaji2915
    @shrirambalaji2915 Před 2 lety

    Thank you😁

  • @DANIAL_GH
    @DANIAL_GH Před rokem

    Thank you so much for this wonderful video
    You solved my problem😍😍😍😍😍😍👍👍👍👍👌👌👌👌✨✨

  • @osmdrcn8076
    @osmdrcn8076 Před 3 lety

    thank you!

  • @programmingweb5250
    @programmingweb5250 Před 3 lety

    Saying once again, Thank you sir 👍

  • @cholst1
    @cholst1 Před 2 lety

    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.

  • @argenisaguilar9045
    @argenisaguilar9045 Před 3 lety

    Great..thanks so much...

  • @andrew.schaeffer4032
    @andrew.schaeffer4032 Před 2 lety

    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!

  • @jericovalino4976
    @jericovalino4976 Před 3 lety

    I'm early again. Thanks for this!

  • @elbanowilliamprovenzalilar8800

    super nice

  • @shishirtiwari6484
    @shishirtiwari6484 Před 3 lety +1

    Me : Kevin you dropped something
    Kevin : what ?
    Me : A Masterpiece

  • @CharlesSmall
    @CharlesSmall Před 3 lety

    Thank you

  • @Sam-vz7pf
    @Sam-vz7pf Před 2 lety

    Thank you Thank you Thank you..............Kevin♥️

  • @tunaham0278
    @tunaham0278 Před rokem

    thank you sir

  • @MeraDastoor
    @MeraDastoor Před 2 lety

    thanks bro