15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | Full Course For Beginners

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ม.ค. 2025

ความคิดเห็น • 518

  • @Dani_Krossing
    @Dani_Krossing  ปีที่แล้ว +14

    NEW UPDATED 2023 COURSE AVAILABLE! 🙂
    You can find it here: th-cam.com/video/v8jDnBYc0bs/w-d-xo.html&ab_channel=DaniKrossing

  • @krisencina8174
    @krisencina8174 5 ปีที่แล้ว +110

    For those having trouble in seeing their image, place the folder where the image is located to the same folder of the html document you are trying to place the image on. Worked for me.

  • @fizzy1550
    @fizzy1550 3 ปีที่แล้ว +1

    OH MY GOD, THANK YOU!!!!!!!!!!!!
    NOBODY WOULD FRIGGIN' EXPLAIN WHERE I NEEDED ALL MY FILES AND STUFF, AND IT HAS TAKEN ME ALMOST A WHOLE DAY TO FIGURE OUT HOW TO GET IMAGES IN THE BACKGROUND OF MY PAGE!!!!!!! THANK YOU, THANK YOU, THANK YOU!!!!!

  • @rabsfeir
    @rabsfeir 4 ปีที่แล้ว +100

    Dude, there are good videos out there and i learned a lot, but yours is so well structured and how you split your videos... Thank you

  • @dcandleonna
    @dcandleonna 6 ปีที่แล้ว +32

    thank you so much for this video, you have no idea how much you've helped!

  • @edwardnorton7463
    @edwardnorton7463 3 ปีที่แล้ว +30

    This is the best video that I've come across. All videos should be made this way. Straight to the point and well explained. Thank you.

  • @boss131ful
    @boss131ful 5 ปีที่แล้ว +12

    guys as for me i made a very dumb mistake which made me suffer for almost a week, the mistake was
    i saved the folder as "images" but when i wrote it down on my text editor i wrote "img"
    a simple mistake of not paying close attention like this can be very frustrating
    thank you for the video btw

    • @lokee16
      @lokee16 3 ปีที่แล้ว

      I did the same thing. cost me 8 hours before I figured it out

  • @mb3938
    @mb3938 4 ปีที่แล้ว +8

    Thanks a lot!! this videos had helped me so much! better than the coursera videos where they talk and talk introduction and never go to the point of teaching. You are a great teacher!

  • @user-fo3to8rn2x
    @user-fo3to8rn2x 3 ปีที่แล้ว +1

    THANK YOU SOO MUCH!
    I COULDNT FIGURE OUT HOW TO INCLUDE IMAGES SO THEY ARE RESIZEABLE BUT NOW I KNOW!
    MY WEBSITE PROGRESS MIGHT HAVE BEEN AS GOOD AS DEAD WITHOUT YOU!

  • @AgnaldoC
    @AgnaldoC 4 ปีที่แล้ว +13

    Best video ever. Thanks for that, this was so confusing to me

  • @VictorThompson-r8k
    @VictorThompson-r8k 9 หลายเดือนก่อน +2

    Brother I thank you for your wonderful 👍🏻😊 explanatory video 📷
    I just came across your video on TH-cam as a beginninger in HTML and I think 💬🤔 I'm humble to learn from you brother 🥰✅

  • @jeffu3248
    @jeffu3248 ปีที่แล้ว

    Life Saver! I'm taking the course through college now and working on getting better while learning HTML. Thank you!

    • @Dani_Krossing
      @Dani_Krossing  ปีที่แล้ว

      I recommend watching my newer 2023 course 😊 it can be found on my channel page

  • @oreojustinvlogs8091
    @oreojustinvlogs8091 3 ปีที่แล้ว +10

    Thanks a lot Sir, these tutorials helped me a lot about Inserting Images and other functions using CSS! God Bless Sir and more power to your channel

  • @aadrikasingh5004
    @aadrikasingh5004 3 ปีที่แล้ว

    After seeing almost 10-20 videos on how to add image................I found the solution in this video. Thankyou!!!

  • @geraldaquino7858
    @geraldaquino7858 ปีที่แล้ว +1

    just started learning programming at my late age. this tutorial is really helpful.

  • @guilhermegarcia1964
    @guilhermegarcia1964 5 ปีที่แล้ว +4

    if you're still having problems with the div class background-image not showing, even after correctly stating the img path, try ctrl + shift + R for refreshing your page. Seems like most browsers mess up the cache when dealing with urls.

    • @GuidetteExpert
      @GuidetteExpert 3 ปีที่แล้ว +1

      Im also having a problem with image, being appeard. I dosnt want to show up on the page, even tho I gave it the right folder and in the right place.

    • @lennnonable
      @lennnonable 2 ปีที่แล้ว

      3 years later! I hope you managed to crack it. th-cam.com/video/rSSijzjPYKU/w-d-xo.html

    • @mossflower9042
      @mossflower9042 3 หลายเดือนก่อน

      I have the same problem, heelp

  • @koko5498
    @koko5498 4 ปีที่แล้ว +3

    About the fourth of the image, It's about the resolution , if you have 1280x720 you divide 1280/4 = 320 width and 720 / 4 = 180 height
    henceforth 320x180 its a 1/4 of the whole image ... It could be pretty basic and easy to understand , but I found it my way so I hope it helps someone.
    Cheers

  • @Mariam_babeeg266yx
    @Mariam_babeeg266yx หลายเดือนก่อน +1

    It Actually worked!! thanks a lot

  • @kv8671
    @kv8671 3 ปีที่แล้ว +9

    I am so happy I found this channel,I have struggled a lot before with inserting images but now I can after watching this video,your work is well structured and very helpful even to people like me who are new to coding...thank you so much

    • @Hithere-wq6qi
      @Hithere-wq6qi 2 ปีที่แล้ว

      How well did you improve in html from the time you wrote this comment, I also just started today

  • @asyad1000
    @asyad1000 8 หลายเดือนก่อน +1

    Bless you man, exactly what I needed. Really thank you.

  • @arnoldjohnalcaraz4895
    @arnoldjohnalcaraz4895 4 ปีที่แล้ว +14

    For those who keep in questioning about the image is not shown in the web page.
    Make sure that your folder, where your image is, placed at the same file where your HTML file is.

  • @gamite7509
    @gamite7509 2 ปีที่แล้ว +1

    This is my first video on your channel, you were great at explaining everything, now I can customise my images better. Thank you!!!

  • @CalvinKetmanee
    @CalvinKetmanee ปีที่แล้ว

    thanks this helped alot had to search through many videos to find how to do this !

  • @kzuhairi2008
    @kzuhairi2008 6 ปีที่แล้ว +7

    your video just wow ! you make me amazed on how you teach people on this tutorial ! hope god bless you for this free tutorial ! love it so much !

  • @khaliqamirul1255
    @khaliqamirul1255 3 ปีที่แล้ว +18

    I can't find my image. I can't find my rootfolder. I already wrote everything in the src. C:/Users/Downloads/cats.jpg and tried everything I can think of. Still no image. Why?

    • @nics7513
      @nics7513 2 ปีที่แล้ว +2

      Same problem

    • @atr9012.
      @atr9012. 2 ปีที่แล้ว

      Enter the image in a new file then
      Enter the website you created whith the
      New file that you enter your image
      This will work

  • @KyleDGamer
    @KyleDGamer 2 หลายเดือนก่อน +2

    How can I make the image load on other devices rather than just the pc?

  • @archit4289
    @archit4289 3 ปีที่แล้ว

    YOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO LOVE IT!

  • @ashxx1442
    @ashxx1442 4 ปีที่แล้ว +2

    Such a good tutorial thank you! Also I love the voice quality. You have a really clear voice.

  • @moniromXsong
    @moniromXsong 2 ปีที่แล้ว +2

    Can we edit size of picture on html without using css??

  • @larissakenneh
    @larissakenneh ปีที่แล้ว +2

    Thank you so much i really learn what i have been look for so long you are the best❤

    • @Dani_Krossing
      @Dani_Krossing  ปีที่แล้ว

      You are so welcome! 🙂 Just so you are aware, I have a new 2023 HTML course on my channel, which is much better than this older one. 😊

  • @mrsdhuha
    @mrsdhuha 4 ปีที่แล้ว +2

    Thank you for your video. Can you explain why did you add it inside the wrapper?

  • @mikkiafrobeatdancehallinst7155
    @mikkiafrobeatdancehallinst7155 4 ปีที่แล้ว +1

    Man you have helped me so much thanks ...You are doing some awesome job..

  • @abagail3662
    @abagail3662 2 ปีที่แล้ว

    Best instruction I have found so far, Thank You

  • @abdullahabdelhadi3485
    @abdullahabdelhadi3485 3 ปีที่แล้ว +6

    my picture wont show up? im using google, vision studios

    • @danielamartin6559
      @danielamartin6559 3 ปีที่แล้ว

      @Kohen Kaden mine either! what should I do?

  • @aljazmesec4336
    @aljazmesec4336 7 ปีที่แล้ว +60

    when i set the image and run the programm the picture is not shown.

    • @nemas6355
      @nemas6355 6 ปีที่แล้ว

      same

    • @crgmcd1218
      @crgmcd1218 6 ปีที่แล้ว +5

      Here to say the same and I can NOT find where to sort this issue, making my brains hurt hard!@@nemas6355

    • @NOSASTUDIOS
      @NOSASTUDIOS 6 ปีที่แล้ว

      SAME WITH ME. IVE DONE ALL MY POSSIBLE BEST ITS HELA FRUSTRATING

    • @jacobdreisbach7433
      @jacobdreisbach7433 5 ปีที่แล้ว

      aljaz mesec same

    • @yassinealaoui5388
      @yassinealaoui5388 5 ปีที่แล้ว

      @@jacobdreisbach7433 make sure the image type is what u type after path ( path/name.type)

  • @nethunamaraweera3878
    @nethunamaraweera3878 3 ปีที่แล้ว

    thank you so much wish you all the best with your channel
    😎😎😎

  • @adithya1219
    @adithya1219 8 หลายเดือนก่อน +1

    Thank you for this video..
    This has helped me a lot..😊

  • @karenfrancisco1567
    @karenfrancisco1567 6 ปีที่แล้ว +91

    I can't see the picture? But i did the same thing you did :c

    • @sangeekumar5091
      @sangeekumar5091 4 ปีที่แล้ว +20

      Ik it's like super mate but did u make sure ur pic was in the same file as ur html and css

    • @ajalanbrown2200
      @ajalanbrown2200 3 ปีที่แล้ว +6

      Make sure the directory is there so if the image is in the images folder put : Images/picture.png hopefully that helps

    • @jomarkenderez9061
      @jomarkenderez9061 3 ปีที่แล้ว +2

      put the accurate location of the photo

    • @videostore9619
      @videostore9619 2 ปีที่แล้ว +1

      You must not have any spaces or anything in between your images name. But, of course, you can use (-) that sign in the place of spaces

    • @narcoticman7310
      @narcoticman7310 2 ปีที่แล้ว +4

      Same,me depressed...very sad times...

  • @hospitalpark4461
    @hospitalpark4461 6 ปีที่แล้ว +1

    Very well done series you have here. Surprised you don't have a LOT more views!

  • @stevensmith5626
    @stevensmith5626 2 ปีที่แล้ว

    Fantastic video!

  • @EshaNaeem-j5v
    @EshaNaeem-j5v 11 หลายเดือนก่อน +1

    thank you😊

  • @regineblaise918
    @regineblaise918 5 ปีที่แล้ว

    Ou eksplike byen. Mèsi

  • @titooplata8141
    @titooplata8141 4 ปีที่แล้ว +1

    For people that are not showing image when typing in src and saving code:
    First make a new empty folder in rootfolder and name it img.
    So lets say you go to google and want to save an image right click and select "save image as...". You will then be prompted to name the image so you can write a simple name like eye.jpg. BUT DONT SAVE YET.
    you'll

  • @kaedemc1
    @kaedemc1 4 ปีที่แล้ว +1

    Cheers Daniel!

  • @argenisaguilar9045
    @argenisaguilar9045 3 ปีที่แล้ว

    Awesome...thanks so much---👍

  • @kdaveeffect
    @kdaveeffect 3 ปีที่แล้ว +1

    This is what I needed!! I'm making a scorebug, and I'm wanting to insert a pic of the Teams logo inside the box that has their score in it! Thank you so much!

  • @jumaelahmed9995
    @jumaelahmed9995 4 ปีที่แล้ว

    Great help buddy!

  • @iQuickest
    @iQuickest 5 ปีที่แล้ว +5

    i was in the process of learning html and some basic css , while watching this videos , i already knew some of the stuff but with this videos it help me so much to understand it more and now i feel more fluent on html and css i understood the concept of it pretty quick, i learned python in 2/3 weeks with 2 to 3hours a day but still need to do projects to understand how it works more, while front-end i'd say its quite simple, but learning javaScript its my next goal, i want to understand backend development , i learned python and understand most of the concept of it, now is there tutorials on how to set up a database or user storage to store their "credentials" by that meaning like email and password and remembering it or storing it , i some what know the code for it but still need practice, i know how to get user input from python using username = input("Enter username:")
    print("Username is: " + username) but also confused on how when you login it would ask for the password, would you add the python or javascript Script? and is javascript or python better for backend or php? checked out some of your other videos and saw you use php as your backend language, any update on another language you would use today instead of php?

  • @z1008z
    @z1008z 3 ปีที่แล้ว

    Keep Up The Work Mann..Really Appreciable......

  • @meganspisak2369
    @meganspisak2369 2 ปีที่แล้ว +1

    my main folder is called cafemenu insideIi have img folder and index.html. Same folder. Idon'tt know why but itdoesn'tt work without two .jpg. IfIi delete either one the img is gone. My text editor is visual studio. What am I doing wrong? ty for the help

    • @meganspisak2369
      @meganspisak2369 2 ปีที่แล้ว

      oh and my img folder inside. the pic is called cafelogo.jpg

  • @glasses5w
    @glasses5w 4 ปีที่แล้ว +1

    You are getting me through my class! Thank you!

  • @Mark-c1w8c
    @Mark-c1w8c 2 หลายเดือนก่อน

    Thank you so much! 🙏

  • @roniojericotakahashi1745
    @roniojericotakahashi1745 3 ปีที่แล้ว

    THANK YOU SO MUCH! U SAVED MY SANITY

  • @Zubamughal
    @Zubamughal 5 หลายเดือนก่อน

    Thanks a lotttttt
    It was a big problem for me, that solved because of you

  • @BarnabasDR
    @BarnabasDR 10 หลายเดือนก่อน

    Really awesome ♥️

  • @MrShadyKiller
    @MrShadyKiller 6 ปีที่แล้ว +11

    Great English!

  • @hopesfanrighthere4883
    @hopesfanrighthere4883 4 ปีที่แล้ว

    Thank u ....it's such a very useful video...

  • @Mafiyalyrics01
    @Mafiyalyrics01 2 หลายเดือนก่อน

    Thanks It's really work

  • @lyrichives7859
    @lyrichives7859 ปีที่แล้ว

    I needed this.. thank you so much

  • @gibran5208
    @gibran5208 2 ปีที่แล้ว

    Very helpful! cant thank you enough!

  • @thehiddencode5686
    @thehiddencode5686 6 ปีที่แล้ว +3

    Guys to display the image don't type "jpg" or "gif" at the end of the name of the image inside the folder, just put the "jpg" or "gif" inside the html document.

    • @jordandauber9467
      @jordandauber9467 6 ปีที่แล้ว +1

      Thank you that helped me alot i was struggling

    • @HuzaifahMo
      @HuzaifahMo 6 ปีที่แล้ว +1

      Thanks

    • @28stabwounds90
      @28stabwounds90 6 ปีที่แล้ว +1

      i did that it still didnt work

    • @PeterSpiers
      @PeterSpiers ปีที่แล้ว

      Why isn't this the most upvoted comment!? Tutorials everywhere say to call it .ico or .jpg but your solution solved this issue.

  • @joedavidson5884
    @joedavidson5884 7 หลายเดือนก่อน

    damn bro, i've been searching for this on AI for hours and then you soled my problem in 1 minute

  • @mara8456
    @mara8456 4 ปีที่แล้ว +5

    You went through the folder part a little bit fast, and that's the most important part.

    • @antdx316
      @antdx316 4 ปีที่แล้ว +1

      The folder part is the easiest part.

  • @chonzie2354
    @chonzie2354 4 ปีที่แล้ว +1

    thank you so much helped a lot

  • @idreesfatima38
    @idreesfatima38 4 ปีที่แล้ว

    Good ☺

  • @joydiehyacinthbasanes4123
    @joydiehyacinthbasanes4123 4 ปีที่แล้ว

    Thank you Sir for your video helps me a lot my project 😊😊😊

  • @teamphantom4342
    @teamphantom4342 4 ปีที่แล้ว +1

    Speaking of backgrounds, would there be a way to change the size of a background colour behind a text, image, etc?
    Let's say I have an image and I go into my CSS and give it a background colour of white. Is there a way to stretch the colour background to make it bigger?

    • @komkwam
      @komkwam 4 ปีที่แล้ว +1

      Something like this:
      img{
      background:white;
      padding: 25px;
      }

    • @teamphantom4342
      @teamphantom4342 4 ปีที่แล้ว

      @@komkwam Thanks!

    • @SaberGuYy
      @SaberGuYy 2 ปีที่แล้ว

      @@komkwam Thank you for this

  • @rileyhowley7113
    @rileyhowley7113 4 ปีที่แล้ว +2

    Thankyou for saving my ass in my IT course :)

  • @ivanvrgoc2370
    @ivanvrgoc2370 6 ปีที่แล้ว +3

    Thanks! Great job with the videos

  • @MrBaconstrips13
    @MrBaconstrips13 6 ปีที่แล้ว +3

    Hello! Loving the series so far. This is the only episode I'm having trouble with as my image is not loading. I have it set up exactly as this video, with the exception of keeping the content like contact, portfolio and about me pages from previous videos. Any suggestions? Both HTML and CSS versions of this do not work for me. Thanks.

  • @mariopizzaro
    @mariopizzaro 3 ปีที่แล้ว

    Thanks Dani, anther great tutorial

  • @sirinongorur5676
    @sirinongorur5676 4 ปีที่แล้ว

    Great video but I would like to add a correction. You said that we need to add a width and a height to the image but you were actually adding it to the div and not to the image. Thanks for the video!

  • @PSO2012
    @PSO2012 ปีที่แล้ว

    thanks dude help me lot
    😀

  • @mnisshhh
    @mnisshhh 2 ปีที่แล้ว

    thanks dude... helped me a lot

  • @Baconxfidoshi
    @Baconxfidoshi 4 หลายเดือนก่อน

    o god bless this man and his family for giving us for and amazing information

  • @codewithar9140
    @codewithar9140 4 ปีที่แล้ว

    nice video bro

  • @alfuadadib9305
    @alfuadadib9305 3 ปีที่แล้ว +1

    thanks bro

  • @samanthanicolebusadre8584
    @samanthanicolebusadre8584 ปีที่แล้ว +1

    Thank you omg 😭

  •  3 ปีที่แล้ว

    Excelent. You really helped me a lot. Thank you v.m.

  • @anthonyrobert1376
    @anthonyrobert1376 4 ปีที่แล้ว +3

    what is a root folder?

  • @kaihlmariam5204
    @kaihlmariam5204 4 ปีที่แล้ว

    keep it up

  • @TheRealPhantom
    @TheRealPhantom 3 ปีที่แล้ว

    THANK YOU

  • @walizenlegrand9040
    @walizenlegrand9040 4 ปีที่แล้ว

    Very clear thanks a million!

  • @BROSERMrDIDIER
    @BROSERMrDIDIER ปีที่แล้ว

    Y're the best i met till know for explanations But i have a little worry i am able to change de size as you did

  • @dr__ey
    @dr__ey 2 ปีที่แล้ว

    thank you for this :]

  • @PetsProHub
    @PetsProHub 4 ปีที่แล้ว +1

    Thanks a lot for this video, i search everywhere for this, you really helped me..

  • @andeej_3605
    @andeej_3605 ปีที่แล้ว

    ur the best, i love u

  • @mandysingh4044
    @mandysingh4044 ปีที่แล้ว

    Thanks bro ❤

  • @txerrible1386
    @txerrible1386 4 ปีที่แล้ว

    actually worked thanks

  • @afoxwithahat7846
    @afoxwithahat7846 3 ปีที่แล้ว

    That was exactly what I needed bro, thanks a lot

  • @kavnmd3062
    @kavnmd3062 4 ปีที่แล้ว

    Thank you again.

  • @tahminurrahman9111
    @tahminurrahman9111 2 ปีที่แล้ว

    dude loved your vedio ... but what is this app where you are doing CSS

  • @rggamer4650
    @rggamer4650 ปีที่แล้ว

    thank you sir

  • @dhavalgajjar7502
    @dhavalgajjar7502 4 ปีที่แล้ว

    THANKS I FINALLY GOT SUCESS

  • @jackapo6725
    @jackapo6725 2 ปีที่แล้ว

    Impressive do it for how to insert multiple images.....

    • @Dani_Krossing
      @Dani_Krossing  2 ปีที่แล้ว

      Just copy paste the HTML hehe 🙂

  • @amarmahato-zs1xb
    @amarmahato-zs1xb ปีที่แล้ว

    well done working . can you give me knowledge about in website image i can copy image address then i puting .the size is very large

  • @Векторкачества
    @Векторкачества 4 ปีที่แล้ว

    Thanks a lot man, perfect explonation.

  • @bosepants2435
    @bosepants2435 2 ปีที่แล้ว +1

    My image doesn't appear

  • @creativeupanshu9775
    @creativeupanshu9775 4 ปีที่แล้ว +1

    my picture is not showing it just only displaying an image icon please tell me how to fix it

    • @Ari_Muhamed
      @Ari_Muhamed 4 ปีที่แล้ว

      Me to same problem

    • @Ari_Muhamed
      @Ari_Muhamed 4 ปีที่แล้ว

      İ found it. You have to look at name of image in properties. Because it is different

  • @NelsonB007
    @NelsonB007 5 ปีที่แล้ว

    what a nice video. Thank you!