Hello, in this CSS Crash Course video, we're gonna be looking at background images. So what is the background image? Well, simply put, you can set an image to be you can set a background be an image instead of a color. We call it at the moment, but you would actually setting in CSS instead of using an image tag. You might be wondering, why would you use this over an image tag? And if you try and honestly Google this, I literally just googled it just to see what people are saying.
You will always get different answers for something out there. And well, the simple thing is, I always use image tags. For the most part. Some people prefer to use background images. Somebody will say if your content more in the foreground use image tags, background background image, CSS, but the reality is use whatever suits the situation. I would say my recommendation will be using image tag, less is easier to use.
Background Image a couple of examples where it might be easier. One, if you're dynamically changing it in something like JavaScript can be easier to change CSS properties because CSS manipulating CSS properties in JavaScript and some filler, jQuery is a lot easier than doing changing stuff for image tags. The other thing is if for example, your styling you put in a background image, for a div tag, maybe that div tag has all the elements in it, it's doing just other things in general as more content, then that's a good example where you might want a background image. But if you literally just have an image with nothing hovering over nothing else, it's just an image. Then I was to say use an image tag, but again, do what you think is appropriate for the situation. But I'm going to show you now how to implement it.
So what you want to do is to do, I'm going to create a div tag for creates a div tag, I'm actually going to leave Before now, and in the CSS, I'm going to do div, background dash, image, colon, you RL. And now in some brackets, you simply put the URL for our image. I'm going to do go to the sonar learning website, which is my education website. I'm just going to right click this copy image address, pasting here. It could be an image that you stored locally in a folder or in the same directory. That's not a problem, either.
On the settings a height value of 500 pixels, set it with value 500 pixels, this will actually look squashed or whatever. Let's see what happened for background. Repeat. On a certain no repeat. We don't repeat it for less Save that refresh and then go we have our background image. This is something to bear in mind, we've set the width and the height and this to assess the width of the height of the element, not of the background image itself.
So yeah, there are what I would recommend as an extra task. Have a look if you can explicitly set a background image width and height, see what other properties you can manipulate for the background and for the background image is a great way for you to know and also try and store a image locally instance or IMG or image folder and link their open set of link in it from my website. You can download our image by right clicking saving us on to the first no thing with background image. If you right click you can just do save images whereas this is an image tag and for right click this you can do save images, but you can access if you go to inspect if you go to the background property like right click open link in new tab, you can still access it, but it's just a longer way of doing it.
Some people may see that more securing some potential way. But at the end of the day, you can still access the and if somebody if you don't want somebody to do something with that content, and somebody wants to, somebody could create a script just to run through a set of elements. So it's not really much of a security thing, but I've seen some people say this, so that's something that you might hear. So that's it for this CSS Crash Course video on background images. If you have any questions, feel free to post them on my education platform. So now let me Dakota UK there will be a link attached to this video, which will provide all the source code from the theories.
If you liked the video, please let us know if you didn't know snow as well. And as usual, thank you for watching and I hope you have a great day.