Up next in 10
CSS Tutorial For Beginners 44 - Backgrounds
4K views
Feb 8, 2024
The video "CSS Tutorial For Beginners 44 - Backgrounds" is likely part of a beginner-friendly series aimed at educating individuals on the fundamentals of Cascading Style Sheets (CSS) for web design. In this tutorial, the focus is on exploring various techniques for styling backgrounds of HTML elements using CSS. Backgrounds play a crucial role in enhancing the visual appeal and readability of web pages. In this tutorial, viewers can expect to learn how to set background colors, images, gradients, and patterns using CSS properties such as background-color, background-image, background-repeat, background-size, and background-position. Additionally, the tutorial may cover advanced topics like background attachment and background blending modes to further customize the appearance of backgrounds. By following along with this tutorial, beginners can gain practical skills for effectively styling backgrounds in their web projects. Understanding how to manipulate backgrounds using CSS empowers designers to create visually stunning and engaging websites that captivate users' attention.
View Video Transcript
0:00
You're watching CSS for Beginners lesson 44, and today we're going to talk about the background property
0:13
Okay, so here I am back in the HTML, and as you can see I've stripped it out quite a little bit
0:20
We've no longer got all of those divs here, we've got one remaining, and that is the one
0:23
with the class of static width. And for that I've written this rule here, which is giving the element a width of 300
0:30
pixels and a height of 300 pixels. So we're going to take a look at this background property, or the background properties I should
0:35
say, and there's quite a few of them. I'm not going to go through them all, just the three or four most popular ones that you're
0:41
going to use probably 95% of the time. The other ones I'll leave a link to the Mozilla developer guide on background properties so
0:50
you can go out and check that out on your own after this video. But like I say, the main three or four you'll use 95% of the time, and that's what we're
0:57
going to cover here. So we're going to start with the most basic background property, and that is the background color
1:03
And for that we just write background-color. And you've probably seen me do this already throughout the course, but we can pass a value
1:11
to it that is a keyword, which is one of these things here that brackets has thrown up very
1:15
helpfully for me. And there's quite a lot, so that's pretty cool, we can get whichever color we want from
1:19
here, or we can use a hex code or an RGB value
1:23
Don't worry about what we do for the value for now, I'm going to show you colors in an
1:27
entirely different video, we're going to concentrate on that there. For now I just want to show you the different background properties
1:32
So I'm going to use a hex code, which is going to be 606060, and that's going to be a kind
1:38
of medium to dark gray. So let's save that now and take a look at this in a browser to see how it looks
1:45
Alright, and there we go, just a simple square with a gray background color, 300 pixels in
1:53
height and 300 pixels in width. So that's the background color, that's all there is to it, dead simple
1:59
Now the second one I'm going to show you is the background-image property, and that is
2:03
just simply background-image. To pass an image to a background, then we have to first of all specify that it's a URL
2:13
that we're going to give to this background-image property. And then once we've done that, we open our parenthesis and close them, and then within
2:19
those parenthesis we write our link to our image. So say you've got your image hosted, I don't know, on your server, or on photobucket, or
2:29
wherever you've got your image, and you want to link to it, then we just paste it in here
2:34
And I've already done that, I've copied one, and that's off the NetNinja website, it's
2:37
just that little ninja star that you throw at people, I don't know what they're called, I think it's just a ninja star
2:43
So we're going to put that as our background-image, so I'll save that now, we'll view this in
2:48
a browser, and see what it looks like. Alright cool, there they are, all these little white things here, that is the ninja star
3:00
And it's repeating itself from left to right, and from top to bottom, in a kind of grid format
3:07
Actually this little grey thing looks pretty cool doesn't it, like a grey rose
3:12
So that's what happens by default, it kind of repeats itself to the right, and repeats
3:17
itself to the bottom. So how do we overcome this, say we only want to show the image once, well we can do that
3:25
by using the background-repeat property. And we say background-repeat, and then if we only want to use it once, we don't want
3:36
it to repeat, then we just simply write no-repeat. Okay that's all there is to it, and now if we look at this, show in explorer, here's
3:59
a tip guys, if you want to do CSS learn to spell, because I certainly can't
4:05
Now fingers crossed this should work. There we go, brilliant, only shows once now in the top left
4:14
So by default, background images repeat left to right, and top to bottom
4:21
If you don't want them to repeat, then you do a background-repeat property, and set it
4:25
to no-repeat. I'm going to show you one other value of the background-repeat property, and to do that
4:33
I'm just going to open this up in the console, and you can see here we've got the background-image
4:39
property, and then the background-repeat property. Here I'm going to put round, and now can you see that it's made the background image fit
4:51
completely within this kind of grid. It goes around the perimeter, and it goes around inside that, and then around inside that
5:00
Now if I remove this, and go back to the default one, you can see how now it's stretched
5:04
and it's kind of cut off at the edges. Round makes sure that it's not cut off at the edges
5:09
So that's a cool little technique as well. So for now we're going to leave this at no-repeat, so let's just get rid of this in fact
5:16
Go back here, and it's no-repeat. So our background image is displaying once in the top left
5:24
Now say we want to show it in a different position. Well we can do that, and we can do that by saying background-position
5:34
And in this instant, I want to center the image. Well I can do that
5:38
I can just put center, and then that is going to align the image in the very center of the
5:43
element, both vertically and horizontally. So let's take a look at that in the browser
5:57
And there we go, that's cool. So right in the middle now. And if we inspect that element, I'm going to show you just another couple of things
6:04
we can pass to the background-position property. Now we can write top and left, and that will be the top left
6:13
That's how it is at default. If we write top, center, then it's the central position at the top
6:21
If we write bottom, center, then it's bottom and center. And if we write, let's think, bottom right, then it's the bottom right
6:34
And so forth. You can control these two values. You just pass two keywords through, and those keywords are right, bottom, left, and top
6:43
Then you can control where it's going to be. Alternatively, we can pass percentage values through
6:49
So I could say 20%, and that's going to position it 20% to the right
6:56
And then I'll say 10%, and that's going to position it 10% from the top
7:01
Likewise, I could say 80% to the right, and 60% from the top
7:07
So you can position this wherever you want, and we can work in pixels too
7:11
So 20 pixels, and let's say 10 pixels. So the first value here is the position from the left, and the second value here is the
7:24
position from the top. So we can get quite granular with this background position property
7:30
For now, I'm just going to keep this in the center as we have done here
7:34
But I don't like the size of the background image. I want it to be a little bit bigger
7:38
So I'm going to say here, background-size, and then I'm going to pass this a property
7:47
of 300 pixels. No, that's too big, because that's as big as the whole element
7:52
Let's say 200 pixels. All right, and save that. So that means that the image now should hopefully be around, or exactly 200 pixels in width
8:03
So let's have a look. Yep, there we go. It looks a bit blurry, because the natural dimensions of my image are much smaller than this
8:10
I've enlarged it. I've blown it up, and it looks a bit blurry. But you get the point. You can make it smaller or larger, and you have a larger image to begin with
8:17
You can do that. You can control it and make it as large as you want. All right, so there are all the different properties I'm going to show you for this lesson
8:26
In the next lesson, I'm going to show you the shorthand way of controlling the background
8:30
properties so that we can write this in one line. Okay, so until then, if you enjoy these videos, please like, subscribe, or share
8:38
If you have any comments or questions, feel free to throw those down below. I'll answer all of those as soon as possible
8:44
Otherwise, guys, I'm going to see you in the next video
#Online Media
#Programming
#Skins
# Themes & Wallpapers
#Web Design & Development