HOW TO ADD BACKGROUND IMAGE IN HTML USING CSS IN NOTEPAD++ (Full Screen)

Подписаться 6 тыс.

Просмотров 44 тыс.

50% 1

This tutorial will show you how to add a background image in html using CSS in Notepad++. We will also learn how to set full screen background image using HTML and CSS. There are several different CSS properties, we can use, as shown below:
background-image - sets the background image in html using css
background-size - allows you to cover the entire browser window with the background image.
background-attachment - allows you to scroll or set image fixed in html page.
background-repeat - allows you to repeat/no-repeat the background image in html page.
#AddBackgroundImageHTMLCSS #NotepadHTMLBackgroundImage
---
🚩 Checkout My other playlists 🚩
Notepad++ HTML tutorials, • NOTEPAD++ HTML TUTORIA...
Notepad++ tips and tricks, • Notepad++ TUTORIALS FO...
Notepad++ Themes, Fonts, Look and Feel, • Notepad++ Themes, Dark...
Notepad++ One Minute Challenge, • Notepad++ Tips & Tricks
---
🚩 please LIKE or SUBSCRIBE.
🚩 Please COMMENT If You Like To See Any Video On Specific Topic
Music Credits:
------------------------------
Track: Our Leaves in the Breeze - Artificial.Music [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Our Leaves in the Bree...
Free Download / Stream: alplus.io/our-leaves-breeze
------------------------------

Хобби

Опубликовано:

5 фев 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 57

@BGNewsReporter 2 года назад

Thank you so much for this! Very clear, easy to understand and helped me exactly with the problems I was having. Thanks!

@AmitChristian 2 года назад

Hi Simon, thank you. Glad that it was useful to you.

@Craig144_1 2 года назад

I really like the way you structured this video tutorial. Nice work!

@AmitChristian 2 года назад

Craig, thanks a lot. I am glad that you found it useful. Please feel free to like the video if you can. Appreciate your comment.

@juliusedah2648 Год назад

Your tutorial is very helpful. Thank you so much.

@AmitChristian Год назад

You’re welcome. Thanks.

@jharoddemdam8270 3 года назад

ty for your video it was help a lot for me to put an background image to my webpage ty ^_^

@AmitChristian 3 года назад

Thanks. I am glad that it was helpful. Please like the video if you can. Thanks again.

@jorvenvargas7501 3 года назад

This help alot thank you so much sir

@AmitChristian 3 года назад

Thanks Jorven.

@RatikantPatil18 10 месяцев назад

Thank you so Brother Very helpful video 😊

@AmitChristian 10 месяцев назад

Happy to help.

@Mtgamerxz 3 месяца назад

Thank you very much bro

@AmitChristian 3 месяца назад

You’re welcome

@dormanticdormant4984 2 года назад

Incredible lesson

@AmitChristian 2 года назад

Thank you. Really glad to know that it was helpful.

@beneya 2 года назад

I am ejoying every little bit of your class.. Thank you

@AmitChristian 2 года назад

Excellent. Thank you.

@toransialis6619 3 года назад

My man please more basics tutorials please ..

@AmitChristian 3 года назад

Please do subscribe to my channel so you don’t miss any upcoming video tutorials. Thank you.

@sabaamohammed5072 2 года назад

thank you so much

@AmitChristian 2 года назад

sabaa mohammed, you are very welcome. Please like the video if you can.

@sabaamohammed5072 2 года назад

@@AmitChristian of course❤

@sparks0507 2 месяца назад

It doesnt seem to work cuz whenever i put the code with the image adress and the file name with the semicolon, the image in the background doesnt show up. Can you give me some assistance?

@AmitChristian 2 месяца назад

can you please share your sample code here?

@AmitChristian 3 года назад

⚡ Hello Friends ⚡ hope you found this useful! 🚩 Let me know what other types of videos you want to see in the future!! And Do Subscribe ♥ to my channel (ru-vid.com/show-UCbU0jmMgFAfmL1J1BHsEmAA) for more videos. **

@AmitChristian 3 года назад

@@aryanverma2144 I pinned it so that it shows up on top.

@leoNation1816 Год назад

Hello so I dont think my code is finding the picture from my file on my computer

@AmitChristian Год назад

It is most likely path issue. When you open the page, what path does it show, if you hover the mouse on the non-displaying picture? It may give you a hint of path or name of image mismatch that may be causing the image not to show up. Let me know. Thanks.

@shadyflex4713 2 года назад

can you uise the method

@AmitChristian 2 года назад

ShadyFlex, I am not fully aware of JFIF format. But this article shows how you can use jfif file with background-image. ( stackoverflow.com/questions/66404576/css-wont-display-background-image ). Hope it helps.

@shadyflex4713 2 года назад

@@AmitChristian i appreciate the help

@mdatif132 2 года назад

when i type no repeat, or cover, the image just disappears. any help?

@AmitChristian 2 года назад

Atif, it could be as simple as missing semi colon. Check out this post, which discuss similar issue. The fix suggested was 'missing semicolon'. ( stackoverflow.com/questions/12168772/no-repeat-makes-image-disappear )

@mdatif132 2 года назад

@@AmitChristian it worked thank you so much and keep up the amazing videos

@AmitChristian 2 года назад

@@mdatif132 Glad to know it worked. Thanks.

@jbghandswome7173 2 года назад

3:26 how is your background so clear while mine is like having pixelated

@AmitChristian 2 года назад

It could be that the image you are using as a background image, itself has a poor resolution. What is the image resolution in terms of width x height?

@jbghandswome7173 2 года назад

@@AmitChristian it was like 1000x1000

@AmitChristian 2 года назад

@@jbghandswome7173 is there a way for you to share your code so that I can take a look at it?

@jbghandswome7173 2 года назад

@@AmitChristian BODY{background-image: url('images/summer.jpg'); background-repeat: no-repeat; background-center; background-size: cover; }

@andrijarankovic3569 2 года назад

I can't post a picture, she just won't read it to me on the web. Can I get some help?

@AmitChristian 2 года назад

Andrija, the most common reason for the picture not to show up on the website, is the incorrect path. Can you please post a code that you are using to post a picture here? It does not need the entire code, just the img tag? Thanks.

@andrijarankovic3569 2 года назад

@@AmitChristian I use the same code as you do in the video at 2:54 I'm sorry if I use the same code as you do in the video at 2:54 I'm sorry if I'm a boring rookie and I don't understand this picture thing very well.

@AmitChristian 2 года назад

@@andrijarankovic3569 Not at all. I don't think it is a rookie question. Here is what I can explain. The way in which I have referenced Image (background.png) in the video is as follows: my folder structure is ........ index.html ........ images | | ......... background.png The dot-slash (./) is used for the relative path to image in the current directory. dot (.) means current directory. So, by specifying ./images/background.png, I am telling web browser to look for background.png file in the "images" folder relative to my index.html file. Also NOTE that the case matters, so if you file/folder has upper or lower case, make sure that it exactly matches with your HTML code. It seems like a long explanation, but hope it helps. All the best.

@andrijarankovic3569 2 года назад

@@AmitChristian I've arranged for them both to be in the same folder and

@AmitChristian 2 года назад

Just checking back, if you were able to fix the image issue?

@kammaralmas9074 3 месяца назад

Sir pls send the skeleton of this code

@kammaralmas9074 3 месяца назад

Sir pls send sir

@jesjessii 2 года назад

i dont understand why it doesnt work for me

@AmitChristian 2 года назад

Can you please explain what are you getting?

@odyseehasdislikesyoutubesu1892 2 года назад

i need help with my notepad ++ , whenever i press space bar it deletes whats in front of it instead of , you know , "MAKING A SPACE" , like this Legend symbol for space bar will be the underscore 1.) _ Step 1: i make a space , the underscore is where the space bar will happen , and when i press space bar , instead of making a space , it deletes the "S" , or if i press space bar again , it deletes the "O" , INSTEAD OF MAKING A FUCKING SPACE , IT TURNED INTO A FORWARDS DELETE BUTTON. i am _ so angry Step 2: i am _ __ angry can you please help me fix my notepad , cuz i cant use the space bar like this.

@AmitChristian 2 года назад

ODYSEE, it is because you may have , by mistake, pressed 'INSERT' button. When you press 'INSERT' button on your keyboard, it actually "eats" up the next character, rather than adding a character. For example: If I have "this is a crazy". If I my cursor is at "c" and if I press space, it would be like "this is razy". Solution: Press 'INSERT' key on your keyboard again and it will go back to original behavior. (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QA8qoiocFOA.html) Thanks.

@ananiatesema8194 10 месяцев назад

It's not working plz help

@AmitChristian 10 месяцев назад

What is the issue? Please describe.

@valeriewashington8403 Год назад

Good morning! My backround picture is not loading. Your help would be greatly appreciated. Hope you see this before 9/25/22 11:59pm. Thanks in advance. Here is the code I used: body{background-image:url('./images/mountains.png'); background-repeat:no-repeat; background-size:cover; background-attachment:fixed; }

@AmitChristian Год назад

Valerie, sorry RU-vid showed your comment just now on 29th. Hope you were able to figure it out before 25th.