‫Hey, there.
‫Welcome back, Siobhan, the site now in this specific lecture, we are going to discuss about background,
‫so backgrounds are pretty important.
‫If you visit any type of site, you will see different background, some utilized background color,
‫some utilized background image and some utilize different other properties that we are going to understand
‫about background.
‫Now, remember one thing, whenever I see a background image that doesn't mean we are going to cover
‫whole background, background image can be said for a particular element.
‫Maybe I have created or do so we have a day.
‫Maybe this is 200 by 200, and I can add a background color to this division itself.
‫Maybe I create a section and this section is only specific to one block only so I can add background
‫color to this specific block itself.
‫Now this can be background color.
‫This can be background image or tons of other properties that we are going to discuss now, and we can
‫add background to text itself.
‫So there are a lot of things with this particular topic that we need to understand.
‫The first thing I'm going to do is one quick thing I'm going to call out there and help me out some
‫random text, so I'm going to utilize my lawyer and see this one.
‫So now we have our division itself.
‫If I right click here, jump on to our inspect.
‫You can see this is our division, and currently we haven't removed the priding as well as margin for
‫what I need to do is let me remove writing as well as let me remove margin itself.
‫Let me also set my box sizing as portable.
‫So here is our current default setting.
‫Now let us understand about background.
‫Before that, let me also walk with our Deb because everything we are going to do will be inside this
‫device or with our body.
‫So by default, let me increase the if one size, I just want to increase the size of one so you can
‫understand everything properly.
‫Let's have this tutorial.
‫And then also, let me add a background color for now.
‫So this is the first background property that will help you to analyze things.
‫I'm adding a background color, maybe as this one.
‫And John, back here now here, you can clearly see that we selected this dip and added a background
‫color.
‫But let's override this, let's understand about different background properties.
‫Let's talk about background image.
‫Now you can see there are different other background properties, as you see.
‫Pick the background image.
‫Now, whenever you are going to work with background image, you have option to utilize.
‫You want to now this.
‫You are the X media media in the form of direct web image image that are already on source or media
‫that are already in our devices.
‫That means in our storage.
‫So if I need to utilize any image, all I have to do is reach to this image from styluses.
‫So if our style or CSF is an unmade folder, we have to move inside media and then select the background.
‫So let me utilize media and then jump on to background.
‫That being, I currently have two images, so I am utilizing one.
‫And I jump back here.
‫You can see I have added some background image, which is pretty dark, so if I jump here and if I open
‫this back, this is our image.
‫And if I get back here, let me also change this one color.
‫So I'm going to utilize color and change it to white.
‫Now here you can see our image is that our image is behind the scene.
‫But the problem here is if you look behind the scene, it's visible, but it's not properly visible.
‫That means we have this proper image and here if you see one part is visible and the other part is not.
‫Now let me try to do some of stuff.
‫Maybe let me try to customize its size.
‫So to customize background size, we have option to utilize background size.
‫Now this give us option, some default option auto contain as well as cover, which we are going to
‫discuss, but we can also base our size in the form of pixels.
‫So if I see 200 pixels and save this one in back here now you can see the images repeating itself again
‫and again.
‫So if you observe this is our image.
‫Let me try to remove the text now because you have an idea and let me add weight and height to this.
‫So.
‫With me as high as 500 pixels.
‫Now you can see the images repeating itself again and again, this is the first one, then it's repeating
‫again, then it's repeating again, then it's repeating again.
‫So that's how this is going to work.
‫Let me utilize every research that will be much better.
‫OK.
‫I hope you got the idea.
‫What is happening?
‫The images repeating again and again.
‫So that means there is some by default setting that force this image to repeat again and again.
‫Also, when we utilize this size, that is background size.
‫It helps us to define a particular fake size to our image.
‫Let's change this.
‫Let's remove the repetition part.
‫So we have a property called background.
‫Repeat.
‫Now this has different properties like no repeat, that means we are going to see emerge only the first
‫time itself.
‫You see the first time only.
‫And here we are.
‫There has the full color this one.
‫So are images only repeating for the first time itself.
‫Then we have different other properties like repeat x.
‫That means our image will repeat on the x axis.
‫That means horizontally.
‫Or if I say repeat y.
‫That means our image will repeat on the y axis itself.
‫So there are different properties that we can deal with the repeat property itself.
‫But what I want only one time that means I want only one time only.
‫But I want my image to cover properly, so cover everything that is visible or that we can utilize our
‫value as cover.
‫That means our image will cover properly, so the image will try to cover 100 percent of the available
‫space.
‫You'll see if I change the size.
‫The image automatically changed its size, so image is trying to expand itself as we grow.
‫So this is the size of body image, and if I try to expand, the image will expand itself.
‫Now the issue is we are using 50, which if we use 100 vegetables.
‫You will see that's how this is working.
‫So that means the image will try to paint all the available space, so if this was her cleavage and
‫if I try to expand here, you can see the image also expand.
‫So that means with cover art might expand, but it will cover 100 percent of the weight.
‫OK.
‫Then there is another one which is contained, and this one is also important if you jump here.
‫Now contain this tasty background image to make sure it's fully visible, so that means if I try to
‫increase the available screen size or if I try to squeeze it, content will maintain the expense ratio
‫of image.
‫That means we will see our image clearly, you see.
‫Currently, it's maintaining its height as well as where you can see everything is clear, clear, clear.
‫As soon as we reach our point where extending this image is going to affect width and height, we can
‫then stop stretching the image.
‫So that's how this is going to work.
‫So I hope you got the idea how this background size repeat as well as the image is going to work.
‫Now, most of the time we utilized this cover, but the problem with coverage is this is not center.
‫So with this size, you can see it's not saying, they're not saying they're not.
‫Now this is saying that we have a clear image, but as soon as we expand on as soon as degrees outside
‫the images, not center.
‫So we have a new property, which is known as background position.
‫This helps us to position our content that is position at image how we can provide additional center,
‫maybe.
‫So if I say this image, we're always going to remain in center, you can see.
‫The focus is always in this, and this is the image, if you look at this again, this is the same Dabar,
‫so an audition will always focus on this and the part you see.
‫And it's important we most of the time utilize this setting itself, we are the image and cower and
‫no repeat and then focus on center.
‫Now you can change this one, you can focus on top.
‫That means this will focus on the top of the image as I expand to about the image.
‫If you jump back here, open the image.
‫This is the top.
‫Now you can change and add to settings.
‫Maybe you want to focus towards bottom, right?
‫So that would be this spot.
‫No, I had if I try to increase or decrease the size, you can see this focuses on bottom right.
‫And if I increase the size, you can again see this focus is on bottom.
‫So that's how this is going to work.
‫Again, you can take any other side that you want, and this is pretty important when we are working
‫with images.
‫Now, most of the images focuses on this indirect self, and this is the setting which you are going
‫to utilize maybe 99 percent of the time.
‫So I hope you got the idea.
‫OK, this is working well.
‫And maybe you can utilize the rich.
‫Generally, we utilize 70, 280 while adding some content.
‫OK, great.
‫So that's how you are going to work with images in the basic setting.
‫Now there are few other things that you can focus on.
‫There is one is attachment and the other one is clip attachment.
‫Help us to understand how our background is going to react towards the content.
‫So first, let me add this so I can explain these content practical manner.
‫Now here we have option about six, we have option about scrawl that inherited.
‫So for example, if I go at fixed, I saved this one.
‫Now, at this point of time, we don't have much content to scrawl or anything.
‫So let me just add some random content and let me create a blue dog and just outlining.
‫And again, let me create a dog at your door in hundred.
‫Are to be back quite a lot in housing, save this one.
‫That should be enough if I get back.
‫Now you can see the image is at this point of time, fixed at exposition.
‫You can see the images fixed, and there are chances that you will see this type of content.
‫Let me add up the proposal and call this law and housing, save this one.
‫And now we'll get back to our page.
‫Now, I suppose this is the page scroll scroll here.
‫You can see we got a section, and that's how this is going to work.
‫The images fixed and you will see these type of effects on multiple website.
‫If I go with maybe 30, which for now, just to demonstrate this example, you can see the images fixed.
‫Only this action is moving top bottom.
‫The images fixed in the background.
‫I hope you got the idea, what we are trying to do.
‫So this is the first one pretty common fixed.
‫I might remove this one if I remove this, save this one and see how natural image is going to work.
‫You can see.
‫Naturally, it's just crawling.
‫That's how it is going to work.
‫So fix means that image will stick behind the scene and we will move our big bill move.
‫So that was about fixed.
‫Now the fourth one is called that you recently saw this is crime.
‫That means are images crawling according to our movement?
‫That's it.
‫So this is scroll.
‫So that said, this is about the attachment.
‫Now there is one important one, which is known as background clip and that we are discussing the next
‫lecture because background clip not only connect with the background, but can also change the way we
‫understand about text.
‫So in the next lecture, let me clear this up and understand about background clip.
‫I hope this lecture was helpful.
‫Thank you for calling, and I see you guys in the next one.