Tailwind CSS Tutorial for Beginners Part19:Background Image classes

Now in the next case, we need to put, we need to bring on some kind of images into it… In this context, the very first thing that I would like to say that I have practically used this definite ‘images’ folder here; I have created this ‘images’ folder as I have… told you earlier in our css tutorial that whenever we are wishing to use any kind of images into your project; then all you need to do first you need to create a separate folder and you need to put on some images into it, and then all you need to do you need to mention that definite url along with the folder of images that you have created. In this particular case I have created this folder of images and I have placed these images right into it; so both of these images…I have practically used these images from pixabay and I have provided a correspondent link of these particular images in the description box below… you may check on the link that I have provided right over here; now in this particular case I would be using this.. ‘fox-small.png’ in the very first case; I am going inside this particular div element that I have created right over here In the first case I will be using this ‘style’ property alone; and in the very first case… I am using this particular background property … …. and what was the file name here? the file name was ‘fox-small.png’ So I will be using this individual file name while defining the url of the image; so I have defined it. Now what happens? I have created a div with a definite class of all those properties; and with a style element with a background property; with the folder name, and the definite file name right over here… press ctrl s, get back to your project and reload… we can see that nothing is working here; so in this case, all we can do, we can use a definite height and check on, what happens next. If we use a height, we can see that this will be the result; so this is another thing that I would like to mention over here; whenever we are using a background image instead of importing some images into your project as image source then it will be dependent on the relative width and height of the container.. .but if we do not, if we do import some kind of image source into our project than it will be resized or rescaled in accordance to the width and height of the image. This is the basic difference between background image and the image source that we were working on… so I have just increased the height and if you are not willing to increase the height then the next possible thing that you can do; instead of using this kind of ‘h-64’ class here that practically imposes a definite height into your container, you may do another thing… just below it, copy this paragraph from this previous container and along with its class and paste it right over here… and you may paste it again you may use it twice or thrice or as many as many times you wish; there’s absolutely no problem; the basic thing is, we are practically imposing a particular height into it without mentioning the height. So, the alternative way is to impose to some kind of contents into it; such that your container gain some height. So, press ctrl s and get back to your project and reload…now you can see that practically we are using some kind of contents inside the container that we have created in an order to gain some height and we can see that this is the background property. Now, for say… we akeep maintaining this definite background property right over here; we won’t be changing anything right now; instead, we will be just going on in the process, we will be just going on in the process, we will be imposing some classes and we will be seeing the differences into it In the next case, let’s get back to their documentation and here, this is the background attachment in the first position that we are looking about and we can see that these are the classes those been used over here… this ‘bg-fixed’, which has the property of background-attachment… fixed; so what is it supposed to do? Let’s say over here; this is the fixed class; it says use a ‘bg-fixed’ to fix a background image… relative to the viewport; that means, the background image should be something like this one. It will be fixed into… the position where it was placed; so that is why, if we… use this class; copy this, use this class… get back to your project and in the first thing, all we are going to do; we are going to remove this ‘bg-red-500’ class right over from here and on the other hand, we will be removing this ‘hover’ class right over here… There it goes. And instead of these classes… we will use here this ‘bg-fixed’. class that we have just recovered. Now if we press ctrl s, have a closer look over here; if we press ctrl s, get back to our project and reload; we will see that nothing is happening right over here; this is not the same as it was seen that means, the background image is not fixed to the position where we had seen it in the first position. So, what should we do?

Leave a Reply

Your email address will not be published. Required fields are marked *