CSS - Sidebar's background color, full width (wordpress)


I'm trying to change background color of the sidebar. I was able to find the class that controls this, however I cannot get the background to extend to the full width of the sidebar, it's only as wide as the content.

URL: http://7pwc.moshpitdigital.com

Any help appreciated!

Example of what I'm trying to achieve:
doug sAsked:
Who is Participating?
Morgan FinleyConnect With a Mentor Commented:
Here goes, and this takes a few steps:

First make sure that the pages with the sidebar have some kind of identifying class or id to differentiate them from the other pages with different layouts (no sidebar).

Second, make sure there are multiple containers wrapped around the main content column (at least two). If this is a WordPress site, there should at least be a couple when you include he loop and page wrapper. The HTML should go something like this:

<div id="main-outer">

<div id="main-inner">



Open in new window

Third, apply the background images to the containers. In your given layout, you have a repeating square tile for the main background and you will have another for the sidebar background. I'm assuming this for the moment, but if that isn't the case I'll get to that next, it's just a matter of how you sliced the images and plan for them to repeat across the page. Your CSS should be similar to this:

#main-outer {
background:  #ffffff url(someTilingPaperPattern.jpg) top left;
/* that sets the repeating paper pattern on the outer wrapper */
#main-inner {
background: #ffffff url(transparentSidebarBG.png) repeat-y top right;
/* this sets our transparent sidebar image to repeat vertically.

Open in new window

The idea here is that you have assigned a background to a container which stretches the entire length of the page (or main content, whatever you're calling it) instead of repeating it behind just the sidebar. The sidebar background will be a slice in the dimensions of your entire page container, with fully transparent pixels spanning the width of the content column, and semi-transparent pixels on the right side in the width of your sidebar. I hope this is making sense still.

You have to use this two-image method because the sidebar in your design lets some of the background show through. If that wasn't the case, you could find a way to make a single slice that has both of your backgrounds, and then repeat it vertically across a single container.

I hope all of that made sense.
Morgan FinleyCommented:
Are you talking about the sidabar on the right side of an internal page? I can't quite see what you're talking about.
Morgan FinleyCommented:
You will have to use the faux-columns technique for this. Basically it uses an image (or two, as in your case) that repeat vertically to give the illusion of having two columns.

I say you will need two images because one will be the textured background of the main content, and the other will be a slice to overlay that background.

I'll get back to you with a code example.
doug sAuthor Commented:
Thanks a ton Morgan.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.