How can you add the background image tpo any webpage using HTML?

We have already some images like two images right we will use those particular images and we will provide the background okay so i have already written one code here which is a very basic code I’ll just copy this and i will tell you what i have written here opening my sublime and creating a new file here saving it in the same folder and naming it as let’s say session six dot him and now here i am going to make my structure i am going to write the background image thing and in the body, i will paste this now obviously this style thing will come inside my head part so I’m going to remove this and i think it is done only this is repeated.

I’m going to remove that perfect now if you look here what we have done so we have given the title background image and then we have given the style in the style we are giving this style to the body let’s just see what all things we have in the body we have five paragraphs the same thing is written again and again so no need to care about this just understand that there are five paragraphs here let’s see what property and value we have given in the style we have put up a background URL okay let’s see what is this background URL that means in the background you want imageslashdownload.jpg let’s find out in our images folder what is download.jpg this is this image right now that means in the background that image will come other than that i am not writing anything so let’s do one thing let’s reload my page so once i reload my page okay one second this is another file so i have to open it yeah.

This is what I’m getting when I’m just putting my image in as a background okay so you can see scrolling is not happening why the reason is the text is not that much i know you can’t see the text it’s like I’m just selecting it so that you can see the text is written here okay the text is there but because of the image, you are not being able to see it okay the next thing is because the text is not that much bigger that is why scrolling thing is not coming okay so only the fixed-width screen is coming if i minimize my screen you can see there are multiple images which are creating automatically this is how your background works out okay now suppose what I’m going to do I’m going to write this paragraph for like 10 to 15 times.

Let’s say i’m writing it like 10 to 15 times or 20 times 25 times now if i reload you can see the scrolling bar has come and the scrolling bar is also giving me my background image again [Music] right so i hope you understood how this background image is coming only by writing this much statement okay now let’s do one thing let’s go to my vpt and let’s see what is this background repeat no repeat right now what is this background repeat no repeat background repeat no repeat means that you don’t want to repeat your images so if i reload my page my image is now not getting repeated scrolling is happening everything is working fine but my image is not getting repeated the actual size of the image is just coming in my browser now this background repeat is having more properties like it is having four of them it is having repeat repeat x repeat y and no repeat repeat means that it will get repeated which is the default one no repeat means it will not repeat which we have just seen repeat x means horizontal so you must have learned cartesian coordinates in which x direction is nothing but the horizontal thing right.

Now let’s reload the page and you can see horizontally my page or my image is getting repeated right there’s no scroll bar on the horizontal side because the text is not that long that is why there is no third image coming okay but once you write a long paragraph the third image can also come okay now the next one is repeated y repeat y means vertically so if i reload my page the image will come vertically right if you write only repeat then it will come horizontally vertically both the ways okay I hope you understood this now whatever we are going to do now we are going to go for the next one which is background-attachment fixed okay so what we are going to do here is we are going to write background determines fixed and we are going to reload the page now you can see here basically nothing happened right but if you look at the code it was written here no-repeat right so we have written here repeat what we have to do first we will comment this.

We will write here no repeat okay and then we will check our web page, so our image will come with no repeating right now we are going to uncomment this particular section which is background attachment fixed and what is the meaning of background it has been fixed is nothing but this image is now fixed here okay so if you now see when I’m scrolling down my text is scrolling down right and my background image is fixed now it is not moving I’m again going to show you suppose this I’m commenting okay and right now if I reload my page if I scroll down my image is going above that means my image is not fixed on the top left corner it is movable it can move once I scroll right but when I make this as uncomment and I save this I’m actually making my background image fixed in this top left corner so when I scroll my text is scrolling, but my image is still there cool right, so this is a very good feature which you can use in your web applications or your websites right so you have to just write background attachment fixed let’s see what is next and it’s written here background position center.

Now this is self-explanatory that means your background image will come in the center something like this and because I have written fixed so it is fixed it is in the center itself I can scroll the text, but the image is in the center only okay the next one is very, very beneficial for you guys because background size cover what it will do it will make your image cover the whole screen so once I reload the image is covering my whole screen right my whole screen is getting covered and when I’m scrolling my text is getting scrolled, but my image is still the same right, so this is what is the use of background properties of CSS.

Let’s revise once so we have used our background URL where we can give the image background-repeat will decide whether your image should get repeated or not if not then it will be just placed in one corner and if yes then in which direction x-direction y-direction or in both background-attachment will make your image fixed at one particular place background position will make it center left right wherever you want to bring it and background-size will actually using the cover will actually make your image cover the whole screen width, so these are the properties or these are the CSS properties which you can use when you’re working with your background image now let’s move to our slide and let’s see what do we have in the next topic now we are going to talk about the CSS text and the font styles understanding CSS text and font styles is really, really fun now let’s begin with the first one which is the text and let’s see in a text what all CSS properties we can use so beginning with text color.

Leave a Reply