make background image visible in sidebar and content area

Thanks for reposting…also good timing because I’m about to call it a night here (12:30am)

You will need to add some custom CSS, either with a child theme’s style.css file, jetpack’s Custom CSS feature (if using Jetpack), or a plugin that is popular called Simple Custom CSS.

What you will need to do is target the div container that relates to the content area. So your code would be like this:

.site-content {
    background: rgba(255,255,255,0.5);
}

The theme uses a solid background colour for that container (which is the white background by default). But to get it to be transparent, that code above is what is needed.

the rgba stands for red-green-blue-alpha (alpha for transparency). Then the 255,255,255 is rgb for the colour white. Then the 0.5 is the transparency level. 0.5 means 50% transparency. You can adjust that value to your preferences.

I’ve never tried this with this theme while using a full page background, so let me know how it works out for you; it would be interesting to see.

To learn more about rgba for transparent backgrounds, you can check out this: RGBA Info

thanks loads for making the time to answer at your last minute of the day.

in customize i reset all my color changes back to default and added your code to the jetpack edit css. nothing seemed to change.

i went to the editor and noted that the css says .site-content {background-color instead of just background, so i changed that and nothing seemed to change.

i changed the rgba from (255,255,255,0.5) to (0,255,255,0.1) to make some contrast and now i see that there seems to be a white layer between the content background and the full background.

when i changed the body {background-color to (0,255,255,0.1), it changed that white layer’s color but does not get transparent.

the upshot is i seem to be able to change the two layers of color, but I still cannot see the background image.

i would love to share the url with you, but the client is not interested in sharing yet in a relatively public forum. if you want to see it, is there a private way to share?

thanks loads.

Ah…the background behind is the body which by default is this:

body {
 background-color: #ffffff;
}

You would need to do this:

body {
background-color: transparent;
}

On my test site, I changed the body background colour to be pink and then did the rgba on the .site-content like I posted before. The result was a transparent content area that showed the body background. So if you are using an image background on the body tag, then that would work.

You might have to change this to cancel out the background color then do your background.

.site-content {
   background-color: transparent;
   background: rgba(255,255,255,0.5);
}

Gosh, i hate being a pest, but the body is still not transparent.

here is the custom CSS. did i misunderstand?

.site-content {
background-color: transparent;
background: rgba(0,255,255,0.5);
}

body {
background-color: transparent;
}

I added the image using the Customizer:
Background Repeat=Tile Horizontally (just to make sure it was going all the way across)
Background Position=Left
Background Attachment=Fixed
Background Size=Contain
Background Overlay Opacity slider 1/3 from the left
and Sidebar Background Colour is the Default #FFFFFF

Have i added it in the wrong place? Here it is from View Page Source

<style type=’text/css’>img#wpstats{display:none}</style><style type=”text/css” id=”custom-background-css”>
.sidebar { background-color: #ffffff; background-image: url(‘https://fc8.c7e.myftpupload.com/wp-content/uploads/2016/04/rocksGray.jpg&#8217;); background-repeat: repeat-x; background-position: top left; background-attachment: fixed; background-size: contain; }
.sidebar:before {opacity: 0.3;}
</style>

Hmmm, now that i am re-reading what you said, do you mean the image is custom css in the body layer, rather than using the customizer and adding it to the background?

sorry to be dense about this. thanks for your patience.

The background setting is only for the sidebar, not the full body background. If you want a full body background, then you have other custom coding to do because this theme was not built to have a regular full body background. You will need to add your image separate by adding css for a background image for the body tag.

This also means you would have to remove the function of the sidebar column background image if you want your body background to fill that area too.

So there’s a lot of custom work here involved to achieve what you want to do.

thanks very much. you are so kind to have been so patient until i understand.

No worries..sorry I wasn’t able to help all the way with this.

Hi, I removed the blog page from home page and added a new page with a text comment on it but the plain white background just does not look right. Worst case as previous blog above, a choice of color for the background. But better yet how do I get a photo, different then the side bar, to be the backgound? I know the one thing I could put my text on to a photo and just put it in the page text box, but that would be worst case, and adjusting size might be a issue. Thanks