p{
background-image: url(www.yourwebsite.com/imageurl/parameter);
}
body{
background-image: url(www.yourwebsite.com/imageurl/parameter);
}
				
			

Video Summary

All right in this section we’re gonna go over CSS background images. This is the background image properties so we can be able to place different images and potentially different graphics as the backgrounds for elements or sections or even the whole body of your web page. So what we do is is we just put in background dash images, we have a little dash right there we have a colon and then we put in URL followed by two parentheses, and in between those parentheses we put in the image URL, and I know what you’re thinking probably why is an image attached to a URL. My image is a jpeg or a png or something like that. 

The thing is, is when we working with websites, all images, documents, and videos, especially within WordPress is stored as its own URL. So we have in WordPress, we have a media library. We’re gonna store all those documents then. And then it gives us a URL that we can call to to be able to put those throughout the website. 

And those may sound a little bit complicated, but it’s really not. So let’s just hop over to code pen and I’m gonna show you what I’m talking about. So before we start, I went to Google Images. And I chose this image. Alright, so what I did was is I just opened this in a new tab, and I’ll just do it again.

And now I came over here and this is what that image looks like. Alright, so now if I come over here, and I copy this, and I’m gonna have this stored and saved for later. Now, let’s hop over into code pen. 

So right now I have the background image property there and I have the value of the URL. And now if I paste this into there, right now we have that image but as you can see, and we’re going to get into different things are like how we can manipulate the background image in next couple sections. But you can see that this image isn’t large enough to cover this whole section. So what it does is ends up repeating itself over and over and over again, which is which song which is fine. And especially to us if you have a pattern that you want to use, and maybe it’s a small image, you might have a cool effect. But while we’re here and we’re using this, I want to come on this is a very long URL, by the way. 

I’m just going to go and make this white colorway and if you misspell your often get it. So we come back here. And now this is white. So if you want to use this as a URL image, now we can. So this is how we’re going to set up background images. And this is how in the next couple sections, we’re going to see how we can actually manipulate these backgrounds. And also too if you wanted to, let’s just take a set of the paragraph. Let’s do the whole body. 

So now we have the body as the whole body as this repeated picture over and over again. Alright, so now if this picture was large enough to cover the whole screen, it would, but since this picture is small, it’s just going to keep repeating itself. So with that being said, this is a pretty straightforward Set up you can you can take any image URL and put it in there and make it your background for any paragraphs. your bodies, your sections, your different elements, all can have background images onto the next section.