I am new here, so I hope this is the correct place to post this. I have tried to get support for this issue on both the theme's forum and on Wordpress.org's forums with no luck. Someone suggested I come here. Here is my issue:

I decided to use a background image on my self-hosted Wordpress blog and have been successful to a point. My sidebars are hidden and "float" out when you click on the icons for the menu sidebar on the left and the regular sidebar on the right. If you click on them (on something other than a mobile device), there's a white gap between the background image and the gray sidebar color. After digging around in the style.css all of yesterday and today, I am exhausted. I would love some insight from some loving soul out there.

It seems to me that the problem occurs in the CSS (line 517), when JS adds a class to the body element:

.js body.active-nav {
background: #F2F2F2;
}

That code seems to override the background image on the body element. See what happens if you comment out that line, as it doesn't seem to be needed. If it is, try changing it to background-color instead of background.

Dappled_Things
—
2013-07-22T01:39:57Z —
#3

Ralph,

Thanks for taking the time to look into this for me. I am having a really hard time getting anyone to offer me assistance with this on any forum out there. I tried to comment out that bit of code, but nothing happened. That color (#F2F2F2) is the color of the left and right sidebars and not the actual background of my site. I'm not sure what you mean by changing it to background-color instead of background. How would that affect the actual tiled background image on my page? Forgive my ignorance. I am trying to learn. Thanks again and thanks for the welcome.

Gail

ronpat
—
2013-07-22T02:39:46Z —
#4

Dappled_Things, if you will disable or delete these two RED items, I believe it will fix the white space problem.

The reason I suggested changing background to background-color was because using backgroun on its own is overriding the background setting on your body element—that is, overriding the background image.

Perhaps you'd be better off putting that color on the sidebar anyway, rather than on the body element. E.g.

.sidebar-left {
background: #F2F2F2;
}

ronpat's suggestion certainly helps, although it may not be the effect you want, as you still won't see the background image appearing down the side between the content and the sidebar, which is what I assume you want. It seems to me that the key is not to override the background image declaration.

Dappled_Things
—
2013-07-22T03:20:50Z —
#6

RonPat,

I tried what you suggested, but that just eliminated the background completely from the sides of the page leaving the page with a very wide white column for posts. I can send you a screen capture, if you'd like. Here you go!

Gail

Dappled_Things
—
2013-07-22T03:32:20Z —
#7

Ralph,

Please don't give up on me, but I have no idea where to put that bit of code you just sent me. When I search my style sheet, there are numerous ".sidebar-left " spots. I wish you could just send me an updated version of my entire style.css file. Sorry for being such a pain.

Gail

Dappled_Things
—
2013-07-22T03:53:12Z —
#8

Ralph & RonPat,

Thank you so much for your help, but I think I have fixed it with the aid of another patient soul out there. It was suggested that I add this snippet of code to my theme's Custom CSS and, I'm happy to say, it worked! Thank you both for sticking with me!

Yes, that's kind of the sledgehammer approach. What I was suggesting was to remove this code from your style sheet :

.js body.active-nav {
background: #F2F2F2;
}

and to place this in your style sheet instead (anywhere would do):

.sidebar-left {
background: #F2F2F2;
}

Dappled_Things
—
2013-07-22T17:17:46Z —
#10

Ralph,

I went ahead and tried what you suggested again after removing the other snippet from my Custom CSS, and it still didn't work. There was no change whatsoever. I just replaced:

.js body.active-nav {
background: #F2F2F2;
}

with this:

.sidebar-left {
background: #F2F2F2;
}

I still got the white gap between the sidebar when it was open and the tiled background. I am having a problem with the Custom CSS snippet I was given, though. If you can take a look at it, I'd appreciate it. When I look at my site in many of the mobile device views here, I can see the tiled background covering the entire page when I click on the right sidebar icon:

I guess I'm still having a problem understanding what you want to see. Could you create an annotated sketch or photoshop image of what you would like to see in the smaller devices (and perhaps a comparitive view showing what you do not want to see) and post that?

Dappled_Things
—
2013-07-22T18:45:23Z —
#12

Ronpat,

Here is a screen shot of what it looks like on a mobile device (in this case a 768 × 1024 Large Tablet in portrait mode). As you can see, the gray sidebar area looks fine, but the main area of the blog has the tiled background completely covering it. It should not be covering the main area of my blog.

ralphm
—
2013-07-22T23:20:31Z —
#13

The background image seems to be gone now. Have you decided to remove it?

Dappled_Things
—
2013-07-22T23:26:36Z —
#14

Ralph,

Someone chewed me out about messing with the actual style.css file. The only place that I changed the style.css was to put this code in the body and in the #site-header:

Someone offered to take a fresh look at it for me, though, so I have reinstalled the original style.css so they can see what it looks like without any changes. I'm hoping we can fix everything in the theme's custom css. I'll check back with you tomorrow and let you know how it goes. Thanks for keeping up with this.

ralphm
—
2013-07-22T23:28:22Z —
#15

No worries! Let us know how you go.

ronpat
—
2013-07-23T08:37:58Z —
#16

Congratulations, Gail! It looks like background pattern in the main blog is finally working correctly when the right sidebar is visible.

However, there seems to be one last bug lingering...

There is a white area (instead of background pattern) at the top of the blog area to the right of the left sidebar button when the window width is between ~748-1140px and the left sidebar is visible. The following change will fix that (without breaking anything else ).

I'm not seeing the white space. Do you still see it? I've been testing it in various screen resolutions and mobile devices and it looks like it's working now. Let me know if you still see a problem. Thanks!

Gail

ronpat
—
2013-07-23T20:53:02Z —
#18

Yes, it seems to have been fixed using the same code I recommended but applying it in a different spot. It's funny that one can see movement in that background image during that fraction of a second while the left sidebar transition occurs. I didn't notice that last night when I was testing. I think maybe other code has changed because the line number are about 50 different today from where they were last night. But then again, maybe I just didn't notice it. Anyway, it look good and still deserves a "congrats"!

Dappled_Things
—
2013-07-23T20:59:53Z —
#19

Ronpat.

A friend of mine helped me out by adding this code to my theme's custom CSS:

So, that's how it was "fixed". Just thought I would throw that out there for anyone else who might be interested. Thanks for your help.

Gail

ronpat
—
2013-07-23T21:29:51Z —
#20

A closing thought:

After looking at your site a few times, I am inclined to believe that the multiple appearances of bg4.png are the result of uninformed/careless use of the background shortcut (the thought is reinforced because I see !important assigned to one of them). I really cannot see a need for bg4 to appear anywhere other than as a background image applied to the <body> tag (although I may be shortsighted). You are probably getting tired of battling this background image problem, but I would suggest more considered use of the background shortcut. It can be a double-edged sword. Sometimes, applying specific background properties where needed, background-image and/or background-color, can be less troublesome, especially in a complex, mulitlayered site.