9 | HOW TO INSERT IMAGES INTO YOUR WEBSITE | 2023 | Learn HTML and CSS Full Course for Beginners

In this video I will show you how to insert images into your HTML website. 🙂 You can insert images either using the img element, or by setting a background image to a container, and in this video I will show how to do both. I will also cover how to create hover effects for your website images.
Full playlist: • 1 | INTRODUCTION TO HT...
➤ 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 and KZbin Memberships to share improved and updated lesson material, and for a small fee you can access all the material either from my memberships or Patreon, depending on your preference. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Memberships: / @dani_krossing
Patreon: / mmtuts

[@user-nk5pz9io2n]

I just wanted to take a moment to express my sincere appreciation to Mr. Dani Krossing for his fantastic teaching of HTML and CSS. Dani, your tutorials and lessons have been incredibly valuable to me, and I've learned so much from your expertise. Your dedication to educating others is truly commendable, and I'm deeply thankful for the knowledge and skills I've gained through your guidance. Keep up the great work, Dani! Your contributions have made a significant impact on my learning journey, and I'm sure many others feel the same way. Thank you!

[@dahyun8664]

You are so good at teaching, this is the best tutorial series I've watched, all the solution for the problems that I encounter when I did my first website is all here. Thanks man!!

[@jeandouat7500]

You look like Elon Musk a bit... On a serious note, I started studying HTML and CSS and the videos that the teacher sent are 3 hours long...your course is WAAAYYY better than those from Linkedin Learning. Thank for that!!

[@Boluwatife2020]

Thank you so much

[@SugarCoatedSmarty]

Bro, I'm taking a class in HTML right now, and my professor has 0 lectures. I've been watching you alongside the readings, and you're so good at teaching. Sincerely, thank you 🫡

[@Sac-chan]

huh, you too? my ex teacher was the same, he comes late and then goes to the restroom and does nothing. These type of videos made me pass his lesson with very high grades at least

[@fajimeyemichael8055]

Hey! It's me again from sololearn. I like how you show us different scenarios for an element before showing us the actual solution . Like saying "if we were to set the width to 50% see how it looks." While knowing we are actually supposed to set the width to maybe 100%. I Just like the way you give us a glimpse of most of what we need and want to know. Great Lesson btw. 👍

[@ipoderma]

the way you explain is absolutely clear and to the point. Thanks !!

[@fissionchips223]

Another terrific installment, Dani. I really appreciate many things you are doing, but keeping best practices and semantics in the forefront seems essential for success. Thank you, as always, for your incredibly considerate instruction!

[@simsolchannel]

Well teacher, I follow your coaching ...

[@davecoll13]

I follow your tutorials and think they are great! I have one question tho, when I use visibility collapse in CSS it doesn't flicker either… is there a disadvantage of using that?

[@helbertpemba8167]

I love this page, holy shit. good job bro, great teacher!

[@latinboy906]

Whenever I adjust the image height and width from within the img element in HTML it works, but when I target it with a class is CSS, nothing changes. I'm linked to the correct stylesheet.

[@RetroblocRBC]

I'm first

[@rebeccafolakemi-tn2jq]

This was really helpful though at first I couldn't hear much of his words but has I sat in from of my PC and rewatch the video for a few rounds. I was able to understand better. 👍👍👍

[@yoake4427]

thanks for lesson. i appreciate it and learned a lot from it.

[@okorieinnocent4854]

Mine is not working, i kept creating the image folder and it's still not working

[@enginesllc9877]

OK. Very good. 4 minutes of html and 16 minutes of css.

[@whiteshadow666777]

Is there an easier way to just set the image in the center of the page? Or is that always done via a margin value?

[@ridorock6]

align-center. I think.

[@storm5492]

what if in the .image you put backround-image: src="the source of the image that you want when you hover" then after that you put the source of the image that you want before hovering so that it reads the first image src then reads the new one, will that load the image?

[@elijahking2653]

So the folder, image, and index.html should all be saved to C; Drive?

[@Dani_Krossing]

No, it needs to be inside the website rootfolder. The rootfolder can be anywhere.

[@user-pl5rv7qh5o]

What app are you using pls

[@kathleen9185]

This is the second video I've watched and the instructor failed to show a download from the a webstie and show it was working in CSS

[@user-zu9gy1ul1p]

Thank you dani

[@finchfinchy2480]

Good lecturing

[@badcatdesign]

🖼 Maybe you could talk about ?

[@Dani_Krossing]

Once I get into responsive design, I will talk about 🙂

[@DivineWhispersChronicles93]

Great

[@HazelRichardson-Amos]

I'm currently having this issue where my image isn't showing up in the browser but is in my test window (using dreamweaver which has a live view). It works perfectly fine if I attach it like a normal image but when I embed it in a class as "background-image: url()" it won't show on my browser. Any solutions?

[@Dani_Krossing]

Clear your browsers cache or “hard refresh” it, and if that doesn’t work, then it is most likely because you have the wrong file open in the browser. 🙂

[@HazelRichardson-Amos]

​@@Dani_Krossing I tried all that but then had the thought of using the inspect panel on chrome like you've said and it's showing an error: "failed to load resource: the server responded with a status of 404 (not found)" but I don't understand why chrome can't find the file but dreamweaver's live mode can?

[@HazelRichardson-Amos]

@@Dani_Krossing Ok I'm really dumb, I've never set up my folders like you have so my CSS file is normally with all my HTML files. However this time I set it up your way and when I added the image I added it as "background-image: url(/img/cover_1.jpg);" which meant that dreamweaver could find it but I needed to add the ".." like you did which is why it wasn't working on the website. Thank you for your help though, as resetting the cache did fix some small CSS stuff that was bugging me.

[@MuhammadAlAzharFaradis]

Thank you for the education, sir. but I practiced as you showed me. In my case, I did as you did, but the image did not appear when I used the class to insert the image. so what's the problem sir? Why can't I like what you do? I so very helpful if you want to answer

[@Stoney_Eagle]

Basse 😍 we need more doggo again hehe

[@nkosinathitrevor-nc7zq]

amazing i can do so much more know

[@dlizard04]

Good morning. This video partly useful only because some of your code is cut off. Line 6 in the html module and line 4 in the main.css module. I don't if your notice it after you posted it.

[@Ceevee1000]

i've been trying to figure out how to put text beside the image and I'm still having trouble, messed around with margin and float but it didn't work. the text keeps going underneath the image, finally got it to work but moving the text away from the image so it doesn't collide was a problem that's why i used margin it worked but i only wanted to use the margin for the text and not the image, whenever i use margin top it also does it for the image and I'm trying to align the text to be in the middle beside the image, what do i do to make it work (I'm using CSS to do it)

[@takwingebenyi]

why do guys always do quality videos with blur cameras

[@Dani_Krossing]

Blur camera? If you mean my facecam, then I see no blur. 🙂

[@RetroblocRBC]

Pin me

[@irajvatannavaz4481]

Your faces is similar Elon Musk

[@stoneroot_pk]

Hello, I wrote the same lines/code for CSS and HTML but when I do Go Live from VS Code for the first time the Image blinks, once the page is opened then on page refreshing it's fine. My code is like this (Sorry for pasting here but I want to resolve this issue :( ) body::after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(../images/coffeehouse-b&g.jpg); } .image { width: 300px; height: 400px; background-image: url(../images/coffeehouse.jpg); background-size:cover; background-repeat: no-repeat; background-position: center; transform: all ease-in-out 100ms; } .image:hover { background-image: url(../images/coffeehouse-b&g.jpg); }

[@yng_tokyo]

for free ?!?!?!?!?!?!?!?!?

[@MauriceWilliams]

You favor Elon Musk.