I'm sure we already know how to change background color, today we gonna learn how to add images as the background.
Let's go ahead and open our text editor, we going to use our last tutorial (emailtool.html file) for this example.
We need to use emailtool.html because we need to have some text in the body in other to add background image to our webpage.
Since we want to add an image as the background of our webpage, make sure you have an image in the same directory you have your emailtool.html (the internal storage).
Like this👇
Create a stylesheet within the head tag, below the title tags and add body as the selector. Add the property:- background-image and for the value, you need to set it to:- url and then add parentheses ( ) looks like brackets but it's referred to as parentheses in CSS language.
Now, inside the parentheses type the name of the image you wanna use as your webpage background. My own image name is back.jpg as you can see in the image above, yours might be different, pls take note of that because I don't want to hear "it's not working" this morning.
This is my preview 👇
Now, we have added a background image to our webpage but it seems we have repeated images up their. If we have one image and we don't want it to repeat, we can change that as well because by default as you saw in my preview, the images is going to repeat left and right and up and down in other fit the width of our webpage but in other not to repeat, we need to add another property:- background-repeat and the value:- no-repeat
Like this 👇
And this is what I get 👇
You see we only have one image that doesn't repeat. I'm case you want to repeat left & right side or up & down, you can also use the background-repeat property but instead of no-repeat, you need to set the value to repeat-x for left & right or repeat-y for up & down
Let's say you want only one image but you don't want it stuck at the top left corner of the webpage. Maybe you want it centered or to a specific location and you need to use property:- background-position and this takes 2 parameters;
1. How far from the left hand side you want to move it (add 10px)
2. How far from the top you want to move it (add 60px)
Like this 👇
This is my preview 👇
As you can see our background-image has been shifted by 10px to the right and 60px down.
But let's say we want this background image centered, we don't know the exact pixel it will take to shift it to the center. Well, not only you can use pixels, we can also use percentage % so if we want it down 60px and we want it centered, then we need to change 10px to 50% which means it will place the background image at the center of our webpage (like 50/50)
