Changing the color, or adding an image to a background section of a your web page, quickly allows you to add a special look or style to your website. In this lesson you will see how easy it is to change CSS background properties using CSS Hero. This is a fun one!
Transcript of the video:
Hey this is Colin and welcome back to the CSS Hero Academy.
in this lesson I’m going to teach you everything I can a boat using CSS hero to change backgrounds. So let’s login and click on the targeting tool here in CSS Hero, click on that, I’m going to select an element here and first of all we’re going to go down to this background here.
So I’m going to choose this post 37 section, I’m going to click on that, now I can get done to my actual CSS options and so here is the background one so I’m going to click on that, opens up all these other options down here that you can change.
So let’s just run quickly through this: first of all I can’t change the background color, I can change it to an image if I prefer, I can also add a gradients and then once we got that you get into images and got some options changing whether I want it to be a repeating image, whether I got the background attachments or whether it stays still when I scroll or whether it scrolls with the page background size, whether I can stretch it to cover the background or I can toil and then the background position and we’re going to get more into this as we go through.
First of all let’s go back into it here and change their color so the simple thing to do is just click on the color wheel here you can do it that one, okay you can choose in there and then close that one, might prefer to click on the white color, bring up the color mixture in here and I’m going to choose this to go, let’s go with something a little bit less right so we’re just going to go Grey.
So that’s all easy it is to change the background color, I can now change also the opacity of that’s so for example if I bring that down to black come on bring it all the way down to Black.
If I don’t want it to be that I can change the opacity and as you can see you can get some grey effect here by doing that that works for any color change the opacity by doing that.
So I’m going to bring the opacity up, I don’t tend to like using the opacity I can do it’s on the color itself, so I’m going to leave that one as it is right now.
Let’s just scroll down to this one here, so let’s just choose this one same thing against post 7, 37 section on those particular theme, I’m going to go to background, this time we are going to choose a background image, now you can use one of the predefined images that runs here.
Like for example I’m just going to put it to Black and White like that, radial, red or you can change the colors of these, I’m going to show you in a second. Then we go down to celestial (2:18) there’s lots of options in here, actually tons of options as you can see a change in the background. Now these are gradients so if I got to the easiest one would probably be the black and white and if we’re going to the gradient F you will see that I’m starting off with the white and I’m ending off with white ok. I’m just like to scroll this up a little bit, if I want the top to start white and the bottom to go to black this is what I do, so I’ve got the white there selected that, I’m going to select this down to the black over here.
Now you can also change this, so if you put it over here you will see that gradient comes in from the side and if I pull it over up here you’ll see the gradient comes in from the top or I can bring it down here and do it from the bottom.
So that’s the gradient so you can just change orientation so I’m going to actually go out the gradient and I’m going to actually choose an image this time, so I’m going to choose an image, I’m going to go to my media library and I’m going to choose this road image here, it’s actually a large image so I am not going to make it the full size and I’m going to use it as background okay.
Just to take a second there as you can see I’ve got a nice picture image as the background here. Now as I scroll you see that it scrolls with it ok, I don’t want it to repeat cause it’s a large picture or large image that I won’t spread across the whole page. The scroll attachment here, the background attachment is I can inherit the exact settings that’s they built in so in this particular case it scrolls with the page, I can choose to override that I use my own scroll as a page or I can use a fix.
Now this is a really cool one, so as I scroll up and down the page now you’ll see that the picture stays still while I scroll over, but for the sake of this video I’m going to put it back to scroll. The background size here I’ve got contained so well actually can’t contained it within the height there, that’s the whole picture or I can put it on the auto and it will stretch it right across like that.
Now I can also go to 100 by 100 and what that is going to do is it’s going to stretch it to 100% height and 100% width and you can change these you or you can do it 50-50 if you want so you can go in here and set it to 50% height and 50% width, and there you go there’s your 50% height and 50% width and you can changes those as long as you want to.
So I like to just cover and that’s covering it right there, now if you want to make this a little bit bigger all you got to do is go up to your background we can change it by size, height so it gets bigger or we can add some padding inside that particular section so the top padding here we can bring it up and the bottom padding we can bring it down and then it will expand your (5:25). So some real quick ways to change the sizes of your sections but if I go back here back to my background, we are going to minimize that so we are down at the image size there, that’s how we add a single image.
But if we go back up here and add a smaller image: going to go here and I’m going to chose this tile, it’s actually a very small tile so I’m going to click on that and I’m going to click show and I’m going to use this as a background. As you can see its 166 by 166 pixels so it’s not design to cover the whole thing but I’m going to show you how it does.
So I’m going to use that as a background so right now because, my settings are set to cover that 166 by 166 pixels image is actually stretching to cover the whole page and as you can see its (6:14) and looking awful. so first thing I’m going to do is put this to auto, here is my original image as you can see and I am going to move this to the top left corner and now I’m going to go up here and I’m going to go up to the background pic and if I repeat it’s on the X it is going to go across and just repeat across the page and if I repeat it on the Y it is going to go up and down and if I click on the last one it will repeat both ways.
So there you can see that I have got the tiled image going right across, now it’s a seem less tile but if we go back here and change the size again you and noticed that this actually, I didn’t need to change the width sorry about that, I’m going to change the height and as you can see that’s the tile image, it stays with the page all the way down so I’m going to go put my width back properly here I don’t know what that was at probably 100 so let’s just do that and the heights we can adjust say that way k and if I go back to the back ground you can get it all back to normal like clicking on reset.
So that’s the back ground, click ok and it all goes back to normal when I click on save and there we go everything is back to normal.
So that’s the background have a play with it, sure you will have a lot of fun can’t really go wrong in try adding images to tile images, colors, gradients, that’s lots of things you can do with the background. So have fun with this one until next week please clicks on subscribe or if you like this video shares it with your friends.
Thanks a lot for watching bye now!