SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems Replacing Background Color with Static Background Image in Responsive Design

    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.

    Here is my site: http://dappledthings.me

    Here is the part of my style sheet that I think may be relevant:

    Code:
    /*-----------------------------------------------------------------------------------*/
    /*	Off Canvas Layout
    /*-----------------------------------------------------------------------------------*/
    
    .content-wrap:before,
    .content-wrap:after {
    	content: " ";
    	position: absolute;
    	z-index: -1;
    	top: 0;
    	left: -100%;
    	width: 100%;
    	height: 100%;
    }
    .content-wrap:after {
    	left: 100%;
    }
    #site-header,
    .sidebar-left,
    .content-wrap,
    .sidebar-right {
    	width: 100%;
    	display: block;
    	position: relative;
    }
    body.active-sidebar,
    .sidebar-left,
    .sidebar-right {
    	background: #f2f2f2;
    }
    #site-header {
    	overflow: hidden;
    	text-align: center;
    	z-index: 4;
    	background-image:url('http://dappledthings.me/wp-content/uploads/2013/07/bg4.png');
            background-attachment: fixed;
    }
    
    /* JavaScript On */
    .js .sidebar-left {
    	height: 0;
    	overflow: hidden;
    	margin-left: -100%;
    	margin-top: 0;
    	float: left;
    }
    .js .content-wrap {
    	position: relative;
    	margin-left: 0;
    	left: 0;
    	right: 0;
    	float: left;
    	z-index: 2;
    }
    .js .sidebar-right {
    	height: 0;
    	overflow: hidden;
    	margin-left: 100%;
    	margin-top: 0;
    	z-index: 1;
    	float: left;
    }
    
    /* Active Left Sidebar */
    .js body.active-nav {
    	background: #f2f2f2;
    }
    .js .active-nav .off-canvas-nav {
    	position: fixed;
    	z-index: 2;
    	width: 100%;
    	overflow: hidden;
    	left: 81.25%;
    	right: auto;
    	top: 0;
    	-webkit-transition: left 0.2s ease-out;
    	-moz-transition: left 0.2s ease-out;
    	-o-transition: left 0.2s ease-out;
    	-ms-transition: left 0.2s ease-out;
    	transition: left 0.2s ease-out;
    }
    .active-nav .sidebar-left {
    	position: relative;
    	margin-left: 0;
    	width: 81.25%;
    	margin-top: 0;
    	height: auto;
    	float: left;
    }
    .js .active-nav .content-wrap {
    	position: fixed;
    	overflow: hidden;
    	width: 100%;
    	left: 81.25%;
    	right: auto;
    	top: 50px;
    	background: #fff
    	-webkit-transition: left .2s ease-out;
    	-moz-transition: left .2s ease-out;
    	-o-transition: left .2s ease-out;
    	-ms-transition: left .2s ease-out;
    	transition: left .2s ease-out;
    }
    .mask-left {
    	visibility: hidden;
    	position: fixed;
    	top: 0;
    	bottom: 0;
    	right: 0;
    	left: 0;
    	opacity: 0;
    	z-index: 1002;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    	filter: alpha(opacity=0);
    	-webkit-box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
    	-moz-box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
    	box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
    }
    .active-nav .mask-left {
    	visibility: visible;
    	left: 81.25%;
    	opacity: 0.8;
    	background: #fff
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    	filter: alpha(opacity=80);
    	-webkit-transition: .01s opacity ease 0.2s;
    	-moz-transition: .01s opacity ease 0.2s;
    	-o-transition: .01s opacity ease 0.2s;
    	-ms-transition: .01s opacity ease 0.2s;
    	transition: .01s opacity ease 0.2s;
    }
    .active-nav .sidebar-right {
    	position: absolute;
    	overflow: hidden;
    	left: 109.765625%;
    }
    
    /* Active Right Sidebar */
    .js .active-sidebar .off-canvas-nav {
    	position: fixed;
    	z-index: 2;
    	width: 100%;
    	overflow: hidden;
    	right: 81.25%;
    	left: auto;
    	top: 0;
    	-webkit-transition: right 0.2s ease-out;
    	-moz-transition: right 0.2s ease-out;
    	-o-transition: right 0.2s ease-out;
    	-ms-transition: right 0.2s ease-out;
    	transition: right 0.2s ease-out;
    }
    .active-sidebar .sidebar-left {
    	position: absolute;
    	overflow: hidden;
    	right: 109.765625%;
    }
    .js .active-sidebar .content-wrap {
    	position: fixed;
    	overflow: hidden;
    	width: 100%;
    	right: 81.25%;
    	left:auto;
    	top: 50px;
    	background: #fff
    	-webkit-transition: .2s right ease-out;
    	-moz-transition: .2s right ease-out;
    	-o-transition: .2s right ease-out;
    	-ms-transition: .2s right ease-out;
    	transition: .2s right ease-out;
    }
    .mask-right {
    	position: fixed;
    	top: 0;
    	bottom: 0;
    	right: 0;
    	left: 0;
    	visibility: hidden;
    	z-index: 1002;
    	opacity: 0;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    	filter: alpha(opacity=0);
    	-webkit-box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
    	-moz-box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
    	box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
    }
    .active-sidebar .mask-right {
    	right: 81.25%;
    	visibility: visible;
    	opacity: 0.8;
    	background: none;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    	filter: alpha(opacity=80);
    	-webkit-transition: .01s opacity ease 0.2s;
    	-moz-transition: .01s opacity ease 0.2s;
    	-o-transition: .01s opacity ease 0.2s;
    	-ms-transition: .01s opacity ease 0.2s;
    	transition: .01s opacity ease 0.2s;
    }
    .active-sidebar .sidebar-right {
    	position: relative;
    	margin-left: 18.75%;
    	width: 81.25%;
    	margin-top:0;
    	height:auto;
    	float:left;
    }
    
    /* Off Canvas Nav Buttons */
    .off-canvas-nav  {
    	width: 100%;
    	overflow: hidden;
    	background: #fff
    	left: 0;
    	right: 0;
    }
    .off-canvas-nav .menu-item,
    .off-canvas-nav .sidebar-item {
    	width: 18.75%;
    	display: block;
    	float: left;
    }
    .off-canvas-nav .sidebar-item {
    	float: right;
    }
    .off-canvas-nav .menu-button,
    .off-canvas-nav .sidebar-button {
    	display: block;
    	width:100%;
    	height:50px;
    	text-indent: -99999px;
    }
    .off-canvas-nav .menu-button {
    	background:#f2f2f2 url(images/menu-btn.png) 50% 0 no-repeat;
    }
    .off-canvas-nav .sidebar-button {
    	background:#f2f2f2 url(images/sidebar-btn.png) 50% 0 no-repeat;
    }
    
    /* Position Fixed Iframe Bugfix */
    .js .active-nav .entry-content iframe,
    .js .active-sidebar .entry-content iframe {
    	display: none;
    }
    .js .active-nav .entry-content .fluid-width-video-wrapper,
    .js .active-sidebar .entry-content .fluid-width-video-wrapper {
    	background: #fff
    }
    
    /* Equal Height Column Fix in Off-Canvas Mode */
    .active-nav .column-wrap,
    .active-sidebar .column-wrap {
    	overflow: hidden;
    	background: #fff
    }
    .active-nav #content-wrap,
    .active-nav .sidebar-left,
    .active-sidebar #content-wrap,
    .active-sidebar .sidebar-right {
    	padding-bottom: 99999px !important;
    	margin-bottom: -99999px !important;
    }
    .active-nav #content-wrap,
    .active-sidebar #content-wrap {
    	background: #fff
    }
    Any help would be greatly appreciated!

    Gail

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Dappled_Things. Welcome to the forums.

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


    Code:
    .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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,454
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Dappled_Things, if you will disable or delete these two RED items, I believe it will fix the white space problem.

    style.css (line 3062)
    Code:
    #site-header, #site-content, .colophon {
        margin: 0 auto;
        max-width: 1000px;
    }
    style.css (line 3371)
    Code:
    #site-header, #site-content, .colophon {
        max-width: 1260px;
    }

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.

    Code:
    .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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    http://dappledthings.smugmug.com/pho...ZThdB4W-XL.jpg

    Gail

  7. #7
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Code:
    .js .active-nav .content-wrap,
    .active-sidebar .mask-right{
      background-image: url('http://dappledthings.me/wp-content/uploads/2013/07/bg4.png') !important;
    }
    Thanks again to both of you!

    Gail

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Dappled_Things View Post
    It was suggested that I add this snippet of code
    Yes, that's kind of the sledgehammer approach. What I was suggesting was to remove this code from your style sheet :

    Code:
    .js body.active-nav {
    background: #F2F2F2;
    }
    and to place this in your style sheet instead (anywhere would do):

    Code:
    .sidebar-left {
    background: #F2F2F2;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

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

    Code:
    .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:

    http://dfcb.github.io/Responsivator/...me&header=hide

    Do you have any ideas how to prevent this? Thanks again!

    Gail

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,454
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Dappled_Things,

    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?

  12. #12
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


    i-5M5Wc4x-XL.jpg

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The background image seems to be gone now. Have you decided to remove it?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:


    background-image:url('http://dappledthings.me/wp-content/uploads/2013/07/bg4.pn*​g'); background-attachment: fixed;


    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.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    No worries! Let us know how you go.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,454
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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 ).

    dappledthings.me#3
    (line 101)
    Change From:
    Code:
    .js .active-nav .off-canvas-nav {
        background: none repeat scroll 0 0 transparent;
    }
    To:
    Code:
    .js .active-nav .off-canvas-nav {
        background: url("http://dappledthings.me/wp-content/uploads/2013/07/bg4.png") repeat scroll 0 0 transparent;
    }

  17. #17
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ronpat,

    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

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,454
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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"!

  19. #19
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ronpat.

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


    Code:
    BODY
    {
    	background: transparent url(http://dappledthings.me/wp-content/uploads/2013/07/bg4.png);
    }
    
    #site-header
    {
    	background: none;
    }
    
    .off-canvas-nav
    {
    	background: transparent url(http://dappledthings.me/wp-content/uploads/2013/07/bg4.png) !important;
    }
    
    .js .active-nav .off-canvas-nav
    {
    	background: transparent;
    }
    
    .js .active-nav .content-wrap, .js .active-sidebar .content-wrap
    {
    	background: transparent url(http://dappledthings.me/wp-content/uploads/2013/07/bg4.png);
    }
    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

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,454
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

    Best2U

  21. #21
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ronpat,

    When I only applied the background link to the body, the tiled background image only showed up in the very center column around the blocks of post content. The header area was entirely white. As were the areas to the left and right when using the sidebars. These areas appear to be static and completely detached from the main body area because of the responsive design of this theme. I am not an expert in these things, so maybe you are onto something. I just know the site has a beautiful background right now. And, yes, if you look very carefully at the top of the page when you slide open the left sidebar in certain screen resolutions you can see that the background doesn't quite match up. I'm willing to accept that even being as OCD as I am. lol If you have a solution besides taking the links out of the areas that otherwise would show up white, let me know. I wish I had gone to school for this. Unfortunately, I decided to major in English Literature and minor in Philosophy. I could have read good books and argued philosophy in my free time.

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,454
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, Gail,

    No, I don't have an example to point to... it's just a nagging thought and is very possibly wrong, so don't lose any sleep over it. I'll put the URL to your site in my notebook. In my "spare time", if curiosity compels me to explore that question further, and if I discover an example that bears fruit, I'll add a post to this thread. Otherwise, I'm glad to see it working to your satisfaction and can't believe I had such a hard time grasping the "picture" in the first place .

    Cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •