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

FIND MY 2023 COURSE HERE: • 1 | INTRODUCTION TO HT...
How to insert images using HTML and CSS | Learn HTML and CSS | HTML tutorial | Basics of CSS. In this lesson we will learn how to create an HTML image in our website page. We will learn how to insert images using HTML and we will learn how to insert images as a CSS background image, which also allow for us to create banners.
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Material for this lesson: / lesson-material-42361704

[@Dani_Krossing]

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: kzbin.info/www/bejne/rGnNdaF4jshjmNU&ab_channel=DaniKrossing

[@user-fo3to8rn2x]

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!

[@oreojustinvlogs8091]

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

[@jeffu3248]

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

[@Dani_Krossing]

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

[@rabsfeir]

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

[@kabhikachambala3392]

Please help me. It works if I browse with Google chrome not Mozilla Firefox. Why

[@abonyivictor2319]

Thanks

[@munafmuhamediqbal1734]

no wrong

[@aadrikasingh5004]

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

[@kv8671]

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]

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

[@dcandleonna]

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

[@boss131ful]

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]

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

[@krisencina8174]

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.

[@bosssoumare8944]

THANK YOU SOO MUCHH, EVEN THOUGH I don't know you

[@rmilo]

THANKS

[@Bigmanting150]

Bless you

[@eliasziad7864]

Thanks mfer.

[@mustafakhalid9330]

Thank you

[@khaliqamirul1255]

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]

Same problem

[@atr9012.]

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

[@AgnaldoC]

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

[@edwardnorton7463]

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.

[@abdullahabdelhadi3485]

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

[@danielamartin6559]

@Kohen Kaden mine either! what should I do?

[@hospitalpark4461]

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

[@karenfrancisco1567]

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

[@sangeekumar5091]

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

[@ajalanbrown2200]

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

[@jomarkenderez9061]

put the accurate location of the photo

[@videostore9619]

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]

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

[@sirinongorur5676]

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!

[@MrShadyKiller]

Great English!

[@govind22703]

sarcasm

[@walizenlegrand9040]

Very clear thanks a million!

[@stevensmith5626]

Fantastic video!

[@arnoldjohnalcaraz4895]

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.

[@nacejehart4849]

Thank you

[@demonicknight2390]

Thanks

[@nacejehart4849]

U can just copy the picture link

[@icondaughter8461]

God bless you for this straight forward reply 🙏

[@mara8456]

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

[@antdx316]

The folder part is the easiest part.

[@alfuadadib9305]

thanks bro

[@mb3938]

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!

[@VictorThompson-r8k]

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

[@moniromXsong]

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

[@lukaeric3479]

Yes

[@BarnabasDR]

Really awesome ♥️

[@anthonyrobert1376]

what is a root folder?

[@Векторкачества]

Thanks a lot man, perfect explonation.

[@im_dalton_297]

This helped alot!!! thank you!

[@koko5498]

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

[@junior..9333]

good

[@kzuhairi2008]

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 !

[@Vincent-fs8ry]

Great content like always!

[@zelenimonter4901]

I have problem, this is not working...

[@lokezinck9185]

det forst nu jeg legger merke til du dansk. mind blowing

[@samar5884]

it didnt work for me for some reason :(

[@jhudieldemesa4166]

thanks

[@mrsdhuha]

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

[@titooplata8141]

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

[@danielamartin6559]

?

[@murtazmalik4938]

Thank you very much, l appreciate

[@txerrible1386]

actually worked thanks

[@aljazmesec4336]

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

[@nemas6355]

same

[@crgmcd1218]

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

[@THEWORDONLINE]

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

[@jacobdreisbach7433]

aljaz mesec same

[@yassinealaoui5388]

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

[@guilhermegarcia1964]

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]

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]

3 years later! I hope you managed to crack it. kzbin.info/www/bejne/qIS2mp2wn7WMgbc

[@mossflower9042]

I have the same problem, heelp

[@teamphantom4342]

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]

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

[@teamphantom4342]

@@komkwam Thanks!

[@SaberGuYy]

@@komkwam Thank you for this

[@bosepants2435]

My image doesn't appear

[@petlovers6868]

Thank u so much

[@meganspisak2369]

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]

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

[@GuidetteExpert]

I did exactly as you said regarding the image, still it didnt work :( Dont understand why my image dont want to appear -_-

[@ares12351]

GuidetteExpert same

[@GuidetteExpert]

@@ares12351 I found out what was wrong. My computer doesnt require me to write nameof image dot jpg (nameofimage.jpg) because the jpg comes automatically when saving a image. The jpg appears as the file type when saving the name of the image.

[@ares12351]

GuidetteExpert so what do u have to write?

[@patriayvida4209]

Very interesting and well explained. Thanks! {08-2021;}

[@LiaSueKim]

i wonder if you could show me when you set the width of wrapper and when you publish website what is going to be outside 1000px; liquid layout is clear but fixed layout is not ? does it look empty outside 1000px box

[@Dinger985]

for some reason my image wont work or load

[@vampsteph9993]

is it possible to add an alt or some phrasing in the back end should the image not be supported from a browser? or can we only add alt in html?

[@braintechgreatcontent9329]

I am having problem with the image, when I uploaded it to the internet The image is not showing

[@AllenMarsam]

thanks!

[@adithya1219]

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

[@creativeupanshu9775]

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

[@Ari_Muhamed]

Me to same problem

[@Ari_Muhamed]

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

[@asyad1000]

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

[@kaihlmariam5204]

keep it up

[@gamex4711]

i have a question Because when ever i Insert image Image quality is Not that good and resolution as well

[@dhanyaakashanasaravanan6009]

Actually, this doesn't work for me and I tried many times doing it.

[@dhanyaakashanasaravanan6009]

I did it and for the place of image it comes a x

[@YourNextiPhone1]

Wow! Nice audio

[@thehiddencode5686]

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]

Thank you that helped me alot i was struggling

[@HuzaifahMo]

Thanks

[@28stabwounds90]

i did that it still didnt work

[@PeterSpiers]

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

[@AmodeusR]

11:50 What is the point on copying everything just to delete? Just type ".img-eye" man, it would be must faster xD

[@jenghd4604]

XDDD

[@jackapo6725]

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

[@Dani_Krossing]

Just copy paste the HTML hehe 🙂

[@Wanderer1258]

Somehow I can't set a background image in the container via css file. It just doesn't display on the screen. Fixed: somehow you need to set both width and height of the image in css file, or it won't show.

[@Webreatheblack]

Hello. I love your videos. I’m having a problem with my html code. I followed these instructions but my photo won’t shrink down. It remains huge. Also when i get another photo. It either shows as broken or it’s huge also. What am i doing wrong

[@NolrizTheGamer]

Same ;-;

[@yungzay3866]

Good job in one day I would like to meet your family on KZbin and check out my channel

[@MrBaconstrips13]

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.

[@tysonmoore5909]

I’m having the same issue

[@tapasjaiswal6968]

Sir How i link admin login html page directly to index.html page by login button plz help me sir

[@ashxx1442]

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

[@iQuickest]

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?

[@playnightcore5651]

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

[@mikkiafrobeatdancehallinst7155]

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

[@rileyhowley7113]

Thankyou for saving my ass in my IT course :)

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

[@richytechsolutions]

I don't understand the calculations done in website, Can you please explain sir?

[@fizzy1550]

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

[@sabiyabiradar2748]

When we send resume to someone. Images are not showing for them. Becz of src .whats the solution for that ?would u like to tell plz

[@celestinnarose]

Wow, this helped me understand image styling a lot more Thanks a lot. Right now, I’m testing my web page using external style sheets with a link tag inserted in head is not connecting? Thanks I’d really appreciate your help?

[@sovietonionisthebestonion3805]

Does the programme support Uinty engine ?

[@munafmuhamediqbal1734]

its verry bes

[@munafmuhamediqbal1734]

i am aggry

[@HistoryInUnder1]

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

[@shinigami2669]

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]

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

[@waynewepagefera9526]

Rodriguez Michelle Jackson Sharon Lewis Nancy

[@simonemannini6642]

+mmtuts I don't know why, but when I set the background image I can't see that.Could you tell me why? I use Chrome right now

[@aljazmesec4336]

i have the same issue

[@aljazmesec4336]

hey i found the solution, you should click on the image and click open so that it opens it in atom, the rename it in your file so that it doesnt have the .jpg at the end

[@jonattanescalante1999]

I'm sorry. Could you be more thorough? What do you mean rename it so it doesn't have .jpg. What are you renaming it to?

[@amonraii7273]

I saw a similar comment in a previous clip as well. I guess what a lot of people are confused about is that in Windows, the default setting of known file extensions is to hide them. For example: .jpg .txt .gif etc... are hidden since these are known file types by Windows. I think that when people try to change a file name, they also try to change its extension (for example they create a .txt file and try to change it to .html) and since the extension is hidden, windows will save it as something like index.html.txt rather than index.html To do that, you should go to "Folder Options" and untag "Hide extensions for known file types". Only then you can change the name and the extension at the same time. Hope it helps somebody out there.

[@pianoLee-sx9dx]

I am having the same problems but have found that IE is more stable....

[@mounir101]

Sorry I didn't complete the video, because I have a severe cold and I couldn't look at your big eye background. thanks anyway :-(

[@geraldaquino7858]

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

[@28stabwounds90]

HEELLLPPP i am trying everything from changing the path to renaming the image. nothing i try works.

[@yassinealaoui5388]

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

[@ethanpeters7151]

I got a Wix ad for this.

[@samanthanicolebusadre8584]

Thank you omg 😭

[@kitumbadavid5181]

thank youuuuu

[@chimwemwezulu4767]

What app are you using?

[@xannder1777]

what do I need to do if there is a blue question mark in my live server after I code in my image ?

[@stailevance5660]

Sir if you want to put an image do we have be online because I always take image from my folder but fails to show

[@Dani_Krossing]

No you do not to be online. If your image isn’t showing, it is most likely because the link is incorrect, there is some CSS that is hiding it, or you need to clear your browsers cache. 🙂

[@kabhikachambala3392]

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

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

[@chonzie2354]

thank you so much helped a lot

[@larissakenneh]

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

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

[@captain0838]

PFF i hate the classes thing one day i made 150 lines code all got ruined by this classes i cried for 24 hours in depression then fixed it then did the flip box