We just finished using different background colors on different pages and changing the background color of the navigation menu. And the next thing we’re going to do with this is to add a background color to the sidebar.
Background Colors in the Sidebar Extend to the End of Content
But this will be a background color for the sidebar that can go all the way down to the bottom. Notice how this sidebar color only goes down to here and it only does that because the HTML element and that element is only this big. There’s not very much inside this primary sidebar widget area and so it won’t go all the way down to the bottom because it’s only as tall as the content that it has.
How to Make the Background Color Extend to Bottom of the Sidebar
So what you do in order to make sure that the sidebar color goes all the way down to the bottom is you make that sidebar color a background image of the container for this whole page. Then you make it’s origin top left or top right and then repeat it in the vertical direction or in the Y-direction and that will provide that background image all the way down. So, let’s take a look an example of that.
Determine Width of the Sidebar
I have an image that I created for the purpose of demonstrating this and that is here, this sidebar background color. This sidebar background color is 340 pixels wide by 20 pixels tall and I determined its width by coming over here, inspecting the element and then grabbing the width of the aside like this. Actually, it doesn’t tell me how wide that is there, does it? I must have been looking at this in Chrome when I figured out its width. So let’s go to that browser.
Go to Chrome and inspect the element. It shows you that the width is 340 pixels wide. You can see that in that note right there, widget area 340 pixels wide so that’s how I knew how big to make that image.
Choose Area to Attach Image
Anyway, we’ve got an image that’s 340 pixels wide but we need to pick the thing we want it to be the background of. It can’t be the background of the aside because you can see the dashed line where it ends, it ends right here. It can’t be of main because it’s this piece right here, so it has to be what the wrapper around both main and aside is which is right there, “content-sidebar-wrap”. So that’s what we’re going to choose.
Add the Image in Custom CSS
We’re going to grab this class “content-sidebar-wrap”, there are no styles for it yet so we’re going to come over here to Custom CSS and paste that class, .content-sidebar-wrap background-image:url and then grab the url and then hit enter and then background-position.
Now, if you get to the place where you don’t remember the exact syntax, you can start typing it like this. Press Ctrl+Space for code completion hints. If we press Ctrl+Space, you can see now it’s giving us options so we could pick background-position. Then if we hit Ctrl+Space again, it’s giving us too many choices really to be useful there but we want it to be at the top right and with that horizontal. So it’s right and top and then background-repeat:repeat.
Collapsing Divs and Floats
This is one of the situations where I used to forget this syntax all the time. You can go Cntrl whatever, Ctrl+Spacebar and say repeat-x and t’ll complete the code for you. So we’ve got right top, repeat-x, .content-sidebar-wrap. Save our Custom CSS, come back over here and refresh this page and nothing happened. Well, nothing happened here because we have to fix a little problem with .content-sidebar-wrap.
Notice when you click on “content-sidebar-wrap” here, nothing is selected. “content-sidebar-wrap” clearly is wrapping everything here but “content-sidebar-wrap”, this div has collapsed. The reason why it’s collapsed is because main content floats and aside floats and because these are elements that are floating and there’s no clearing of those floats inside of the container, the container itself collapses.
Clear the Floating Elements for the Wrapper
This is kind of an advanced topic and we’ll end up talking about this when we talk about floating and positioning of elements but even at this relatively simple CSS level, you still have to account for failure of well, wrapper collapse essentially, div collapse. It collapsed because its contents were floating and those footer elements weren’t cleared.
The easiest way to fix that is to use the after pseudo class for content-sidebar-wrap and to use this trick here, Force Element To Self-Clear its Children in CSS tricks. I’m going to copy this URL and place it in the chat window so you can find it but it’s csstricks.com/snippets/css/clear-fix. It’s entitled Force Element To Self-Clear its Children. Some people call it The “Clearfix” hack. What it uses is the after pseudo class.
This has undergone refinements. I think this was first published in 2004 something so this concept has undergone refinement considerably and we’re going to use the refinement down here at the very bottom. We’re going to select this code after and then it’s going be content is empty set, display: table, clear: both.
Now, it’s not necessary that you understand why this works the way it works, it’s only necessary that you understand that what it does is clear the floating elements for that wrapper. It’s going to eliminate that wrappers collapse and that wrapper, its boundaries will now contain the floated elements that it contains. So, we are going to come back over here to our .content-sidebar-wrap, we’ll just go ahead and copy that and then :after.
This is the after pseudo class and then we’ll come back over here and just copy this CSS, these 3 elements, and paste them in there. I want to fix the tabbing here so I’m just going to select them all and hit shift+tab. If you do that it fixes all the tabbing of the code so that it looks right.
Let’s save this now and refresh it. Oh, funny. I said repeat-x but what I meant was repeat-y, I want to repeat it vertically not horizontally so we save that Custom CSS. We come over here and refresh and now we have this background image scrolling all the way down here.
Change Background Color to Match Image
Now, we still have the background color of this primary sidebar widget area and so we need to use the background color to change it and we can do this in one of two ways. We can either find the thing that’s giving its background color which is not widget-wrap, probably it’s aside up here, yes there’s our background color.
We could simply make this background color transparent, I think that’s what I would do or we could change that background color to match the background image. I think that’s what we’ll do, we’ll change that background color to match the background image.
We’ll copy that background color. Just click on ColorZilla, come down and select that color and the color was copied to the clipboard. Now we’ll come back over here to sidebar primary and say .sidebar-primary background-color and paste that color that we copied. Save our Custom CSS, come back over and reload our CSS and now we have this color that goes all the way down to the bottom regardless of how long or how short our page is. That’s how to add color to a sidebar with the tiling image that extends all the way down to the bottom of the page.