Something else that I would like to demonstrate in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is placing a color in the sidebar that goes all the way down to the bottom of the page.
Typically Color Extends Only to End of Content
As it sits right now there is no background color here in the sidebar. So we’ll inspect the element and If we were to a add a background color to div class=”sidebar” you can see it wouldn’t go all the way down to the bottom because it doesn’t have as much content in it as the page does.
Using a Background Image to Extend Color to Bottom of the Sidebar
So instead of that, what we’re going to do is use a background image. But instead of placing it in the sidebar, what we’re going to do is put it inside of columns and columns wraps both the content and the sidebar. We’re going to put this background image in columns. Then we’re going to set it to the right top for position and repeat in the Y-direction. Then it’ll repeat all the way down to fill up the space.
Add the Background Image
This is a fairly subtle color difference because we have this very light green background here and I’m going to put a white background behind this. I’ve created a background image for this already and it looks like this, it’s a white background image that’s 344 pixels wide, it’s 20 pixels tall.
I’ll come over here to our Media and browse for that image. It’s going to be social-sidebar, open that up, add the image and social-sidebar is there. We’ll copy it and then we’re going to come over here to columns, it’s div class=”columns” that we’re going to put it in.
In fact, I think I’m just going to take that, place that there and instead of footer, we’ll write .columns. We’re going to get rid of the background color and then the background image again is social-sidebar. The background position now is going to be right and it can be top or bottom, it doesn’t really matter in this case and we’re going to repeat in the Y-direction or vertically only.
Let’s save that, come back over here and refresh this. Now you can see we’ve got this white background color here although unfortunately, that white background color continues up into our query box section up here, right? So we need to cover that up.
Review How Layering Works
And this raises an opportunity to talk about how layering works. Remember that this background image is a background image of the body which means it’s behind absolutely everything. And this content is contained inside of the body and therefore, its background is above the body’s background and therefore it’s color is above the body background image.
This container here called the feature box is inside of the content column which is therefore, above the content column. When we give it a background color, that color will sit above this white background image.
Actually, that reminds me I wanted to show you something cool about that so we’re going to inspect the element and then we’re going to come over here and look at it in 3D and kind of shift it around in 3D. The way this works is here’s that background image we put into the body and then here is the background image right there.
So this second layer, this is the background image that we put into the sidebar. Then this background area here which when I click on is called feature box. This background area is above this column. It’s above columns, if I click on feature box, you can see that when I changed the color of the feature box it’s going to be on top of the columns layer. And this layer is of course, on top of the body layer which is why you can layer these elements to get the effect that you’re after.
We’ve got this feature box and we can experiment with this before we do it. We can come down to our feature box and in here, just add a rule, background-color: and paste that color in there and you can see what happens. Well actually, it doesn’t really give me the desired result because something changed here since I prepared this. See I should have prepared this image so that it went all the way down to the bottom here.
At some point I added a little extra space after I prepared these images. This background image should have extended all the way down to this line so that when I put this background color in the feature box, that the feature box color went all the way down to the green line and this green line came all the way down. The only way to fix that is to make this image a few pixels taller and make this light green section a few pixels taller in the image. That’s something you have to consider when you’re doing these kinds of background images, is that you need to try and make elements lineup.
Using Color vs Using a Background Image
One of the reasons why using a background color in this situation is easier is that if one of these widgets gets really tall, I don’t have to worry about it because the background color automatically is going to fill up. If the content of this down here got taller it might end up going above this background image which wouldn’t be great. So I put the background image in this section that I know is roughly going to stay fixed in height and use the background color in the section I thought was going to be variable in height and that’s something for you to consider when you’re doing that.
If you’ve got a section that’s very variable in height, that may change in height depending upon how you fill it out that does make a good argument instead for you to use a background color. Now, that’s not an option in this case because we don’t have the HTML structure that let us to do that so you start making this background image exactly the height it should be and I could probably just make a very small adjustment to this.
Actually, I could change the margin bottom down to 23. So all I needed to do was just reduce the height of this a little tiny bit and then my image would’ve fit again and then my white line would work properly. But those are the kinds of things you can see that you have to take into account when you’re working on using background images to style a site like this.