- Read Tutorial
- Watch Guide Video
With the about me page set now let's take a look at another way that we can work with images and have even a closer connection with the Rails asset pipeline. We're going to use how to set up this background as a full-size image as a case study. Originally it was going to include the background for the images and the video in the same guide but by separating them out that will give you access to the source code for when you want to reference a video background or when you want to access an image background so split it into two just to make it easier for you because there's going to be times when you need a video background. There's going to be times where you want a full-size image background and I want to give you an easy way to do that.
So let's switch into sublime and let's talk about the way that we can add an image background. I'm going to click right here and coming all the way down to the bottom of our custom styles I'm going to add an id selector so I'm going to call this background and this is in the application dot SCSS file. This is going to store the ability to have a background cover and that's kind of the appropriate term as a background cover because that's actually one of the sizes were going to use. It's called Cover and that's available in CSS. So the first thing I'm going to do is I'm going to create some attributes. Let's give us a little bit more room just so you can see this right in the middle because these are going to be a number of styles. Feel free to pause the video and just keep hitting play based off of how you need to type this
#background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: image-url('') no-repeat;
}
Now i'm gonna say background and this is where we're going to connect to the rails asset pipeline. So what I'm going to give you now is not a CSS call but something that Rail's gives us that we can put inside of our CSS files. So you can say image dash url and then inside the parentheses and inside of quotation marks, you can pass the name of the file. So if I switch back to the finder. I can take this image that is home underscore bg and feel free to reference the source code in order to grab this or double click it and you can see that this is a giant hard drive and this is an open source image so you can use this in your own apps. I'm going to copy this file name and paste it in here and add no dash repeat and then this is very important to add background size of cover. Now there are only a few more things we have to do to get this fully working.
Now in a quick review what we have here is a set of styles. Most of them have to deal with positioning such as positioning and fixed so that it won't move having the top and left positions the min high and min with to make sure that it doesn't stretch too far. I definitely think you'd be a good idea for you to explore with a few variations of this one to see if there might be something that you would like better for your own portfolio. But then also so that you can see the effect that each one of these has so I think that would be well worth their time. Now a couple more things if you come back up. There are a few things a few final changes we have to make. One is we need to update the background color because right now if you switch to Google Chrome you can see that right here we have this background color with this dark color which is fine but that will actually override what we have and what our image is going to be. So if you come up to in my file it is lying at thirty-two yours may be slightly different but you can come up here and delete this background color. Then inside of your application HTML file right above the nav. Just create an empty div and eventually we're going to get rid of this when we have our video background. So I'm just going to place it here but it doesn't really matter. [1:34.6]
[00:06:08] But you do need to have an id of background because that's what we're going to select there be something on the page for you to select. You could use the body tag or something but since we're only going to be using this temporarily and eventually we're going to switch this so selecting the video component then I'm just going to place it here and eventually I'm going to swap it out with the video. So let's come back here if I hit refresh now. Look at that we have a full-size bed or image background soon to be a video background. And if you switch to about me it has the background switched contact. It still has the background so this is looking really good. Now one other thing I want one change I want to make is our footer I think should get updated. So if I type an app footer this is our partial. The location is in views shared application footer. We can come and see that we have this mass foot inner we have our copyright generator. Now we can simply come all the way down to the bottom. And here we can create our own little custom class or just can override what that value is going to be. I think that it makes the most sense to put a custom class associated with it some so I'm gonna say app footer color white and hit save.
.app-footer {
color:white;
}
Now if I come back to the application footer we can simply in any of these we could put it here say class and app dash footer. And I believe this should work. Let's come back here and there you go. We have our footer and now it's a little bit easier to see with that white coloring. So the about me is looking good contacts looking good. I think everything here is working. Notice in the application CSS file notice how all we had to do was call this image dash url and we got this special helper method and it has a direct line straight to the asset pipeline. So I'm going to save this so that you can have a reference for any time that you want to have a just plain image background and say get and get commit integrated image background.
git add . git commit -m "Integrated image background for app layout" git push origin image-management
That is all we have to do in this one if I switch to pivotal tracker. We we didn't really have a specific task just for this one so I'm going to say image background just so we have it on the list and we'll have a record that we completed it. So that is now done. In the next guide, we are going to see how we can use the video tag helper and rails to add a video background to our app.