Adding Background Image Revisited

Would love to help, but without a link to your site, it’s hard to see what’s going on. ??

Whoopsie! lol Here you go!

https://dappledthings.me

I’m thinking that I need to change something in the “Off Canvas Layout” from

background: #fff

to

background-image:url('https://dappledthings.me/wp-content/uploads/2013/07/bg4.png');
        background-attachment: fixed;

Here’s the section of the style.css file that I’ve been looking at:

/*-----------------------------------------------------------------------------------*/
/*	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('https://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
}

hi Gail,

Sorry for the delay, but didn’t have much chance to look at this until now and now I still can’t find the issue. I don’t see any white gap anywhere. If there is, I’m missing it and thus hopefully everyone else may not notice it.
Perhaps you’ve been looking at it too long? Or maybe, since I don’t know what it looked like before, I’m not seeing any issue.

It could also be a browser issue. I’m using Chrome on a Mac right now.

Christine,

I am looking at my page in Chrome, Firefox, and IE using Windows 8 on my laptop. I took a screen capture for you, but I just realized I have no way of attaching it here. Maybe I will upload it somewhere and send you a link to the image.

The white areas show up when I click on the sidebar left and sidebar right icons. There’s the sidebar in #F2F2F2 and then there’s the white (#FFFFFF). In the left sidebar you can actually see the white break between the sidebar color and the tiled image background. In the right sidebar, since it’s wider, you just see the gray sidebar and then the white band.

Here’s a link to my screen capture:

https://dappledthings.smugmug.com/photos/i-gJv2wfs/0/XL/i-gJv2wfs-XL.jpg

I’m really hoping you can help. Thanks!

Gail

Christine,

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 for sticking with me, though!

.js .active-nav .content-wrap,
.active-sidebar .mask-right{
  background-image: url('https://dappledthings.me/wp-content/uploads/2013/07/bg4.png') !important;
}

Christine,

I am having a problem with the Custom CSS snippet I was given. 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:

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

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

Gail