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

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ก.ย. 2024

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

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

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

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

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

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

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

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

  • @VictorThompson-r8k
    @VictorThompson-r8k 6 หลายเดือนก่อน +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 🥰✅

  • @iQuickest
    @iQuickest 4 ปีที่แล้ว +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?

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

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

  • @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 ปีที่แล้ว

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

    • @mossflower9042
      @mossflower9042 13 วันที่ผ่านมา

      I have the same problem, heelp

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

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

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

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

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

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

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

    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

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

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

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

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

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

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

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

    Great English!

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

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

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

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

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

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

    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!

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

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

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

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

    • @sangeekumar5091
      @sangeekumar5091 3 ปีที่แล้ว +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 2 ปีที่แล้ว +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...

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

    What I love about this is the very clear video image. So many tutorials are blurry and you can’t see the code clearly. Thank you.

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

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

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

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

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

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

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

    Best instruction I have found so far, Thank You

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

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

    My image doesn't appear

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

    Dude I love you it has taken me so long to figure what I was doing wrong (I was starting from user all the way to the pic and I needed to start from the file with my index). YES! Awesome!

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

    it didnt work for me for some reason :(

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

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

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

    Thanks! Great job with the videos

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

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

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

      same

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

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

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

      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)

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

    Can you add an image using just CSS file and not adding code to HTML? Like referencing a HTML header selection ID to the CSS file and adding an image to the header selection just adding code to the CSS file?

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

    Do you know how i can make two images stand side by side to one another?

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

    Thank you omg 😭

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

    Thankyou for saving my ass in my IT course :)

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

    thank you so much helped a lot

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

    Cheers Daniel!

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

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

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

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

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

    Url didn’t give browser option or folder option. any help me?

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

    Great helpful vids! But I am having trouble on something. So I have my menu up top, then my header, and then I have some writing in my paragraph. I would like to insert a pic behind the paragraph text but not behind my headr or menu? Thanks in advance.

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

    I needed this.. thank you so much

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

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

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

    THANK YOU SO MUCH! U SAVED MY SANITY

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

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

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

    thanks bro

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

    Hi, I was wondering how you would insert multiple images. Say you have a folder named images and you have 4 images inside. How you would insert all the images into your webpage? Would you create an img tag for each one?

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

      yupp you will have to create it for each of them unfortunately, but however you can style them altogether by a class or an id if you want, which will somewhat be time-effective.

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

    Fantastic video!

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

    THANK YOU

  • @thehiddencode5686
    @thehiddencode5686 5 ปีที่แล้ว +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 5 ปีที่แล้ว +1

      Thank you that helped me alot i was struggling

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

      Thanks

    • @28stabwounds90
      @28stabwounds90 5 ปีที่แล้ว +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.

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

    thanks dude help me lot
    😀

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

    MY "HOVER" IN SUBLIME HAS NO COLOR AND NO EFFECT HOW DO I FIX IT ??

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

    Why doesn't my images work? I tried doing which is a profile photo of myself but the image doesn't work. Can anyone help me? been trying to fix it for hours but nothing

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

    Is it possible to link to an image from another project? For example: how do I add the image "smallcat.jpg" from the project "HTML" if I am currently in the file "basics.html" in the project "js_basics"? I ve tried with: . However, this doesn't work. Thank you for the answer!

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

    When I give some height to image, to look better in webpage with full screen.
    But when i goes to small screen the height still remain same.. and looks so bad..what can I do??

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

      img { max-width: 100%; height: auto; } in CSS automatically resets image size in accordance with webpage size

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

    where can I get Css theme from google?

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

    Great help buddy!

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

    Why you used meta charset attribute?? And set it to Utf 9

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

    Awesome...thanks so much---👍

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

    Ok, I'm really going to have to study margins, padding, borders, pixels, percentages, height and width. It seems like the sizing is tripping me up and I'm going to have to learn which size attributes to use and when and how many pixels/percentages.

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

    Thanks Dani, anther great tutorial

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

    how do you insert a link into an image like "click here" button or picture of something.

  • @rggamer4650
    @rggamer4650 9 หลายเดือนก่อน

    thank you sir

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

    Thanks a lot brother.

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

    Really helpful , thank you !

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

    Good ☺

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

    Please tell me what is the app or website you are useing to write the coding?

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

      VSCode is the best text editor for web dev according to most, and it is what I use today

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

      @@Dani_Krossing Thank you so much😊

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

    what a nice video. Thank you!

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

    Than you so much

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

    for some reason my image wont work or load

  • @ant.honyvigil
    @ant.honyvigil 3 ปีที่แล้ว

    Thanks

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

    ur the best, i love u

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

    why do mine wont load
    do jpeg images dont work with html?

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

    Im trying super hard for some reason it wont load it will show that the code is there it just wont load and its becoming difficult

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

    Thank you so very much. Can't thank enough...

  • @hz2164
    @hz2164 17 วันที่ผ่านมา

    What should i do if i can't see my image?

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

    Thank you again.

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

    actually worked thanks

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

    You are really doing a great job. May Allah help you.

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

    How do I overlay text plz help.

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

    great video thanks for posting

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

    How can I add background pic in my sublime??
    I'm using phone but I dont know how to get the pic in the code

  • @dabadiele2823
    @dabadiele2823 9 หลายเดือนก่อน

    What text editor do you use

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

      Visual studio code is think

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

    Nice

  • @MrAugiz-od9wb
    @MrAugiz-od9wb 4 ปีที่แล้ว

    Nice video,but how to make photo on the right side of my webpage?

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

    What app is that?

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

    Ou eksplike byen. Mèsi

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

    what app is this?

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

    im really confused and would appreciate if someone could answer. i am doing the free code camp html course and they said to import an image on a website by: - why does free code camp tell you to write an address- address to what?? and why is it different from this guys?

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

      It's because they have shown you how to link to a image found online, and I have shown you how to link to a image that's included in your websites rootfolder. Both ways work.

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

      @@Dani_Krossing ohhh that makes so much sense!! jeez i should've gotten that from common sense- thank you so much!! :)

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

    pls help iam having problem with images
    i have created a folder named templates where i have all my temlpatets and another one named images which contain the images
    when in home.html i type the image tag and type src ='"images/dog.jpg"and run the command
    the browser show a green n white mini file and does not loads the image.
    when i press f12 for seeing the codes it shows ''Failed to load resource: the server responded with a status of 404 (NOT FOUND)''
    why!!!!!!!! why!!!!!
    why is it showing the error even though the image path is correct

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

    oh youre such a great teacher

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

    i put in the image but all i came up with was a small icon for photo

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

    Why it does not work when I use Mozilla Firefox as a browser

  • @jochebedayo-ojo4338
    @jochebedayo-ojo4338 11 หลายเดือนก่อน

    my image is not visible on the page

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

    thank you for this :]