Background image screws up text visibility

It’s a dark image, and all the text on the site is black.

Background images are always going to be problematic, with any theme. It’s hard to have one with a uniform color that won’t result in some letter being hard to read depending on how they intersect with the image.

Why is it filling up the entire background of the text of the page? That’s just bad form in any case.

Because you’ve used a background image, not a header, featured, or cover image.

Is there some Gutenberg-y way to do this? Or am I back to custom code within the first 20 minutes of poking at this?

In this case, you have two options:

1. The Paragraph Block allows you to change text color: https://www.ads-software.com/support/article/paragraph-block/#color-settings

2. Or, if you wanted to change it site-wide, add this via Additional CSS in the Customizer:

body, .entry-title a, :root .has-primary-color {
    color: #fff;
}

and adjust the color as desired (the example here is white).

• This reply was modified 4 years, 10 months ago by James Huff. Reason: forgot to link to the Paragraph Block doc

Thanks @macmanx

I have never been a fan of background images on an entire post and that was not my intent. I can now see that I was confused by the Twenty Twenty theme customization options, where the only image option turned out to fill the entire background of all posts and pages. Definitely not what I was going for ??

I’ve done a bit more with this now based on your feedback and I’m understanding the theme behavior better.

I removed the background image — which, incidentally, was not an easy task. That section of the theme customizer had no option to remove….in fact it looked as if I had never selected a bg image at all. I ended up going through the process again to add a different image as the background, and then I saw the option to remove it.

I then went to the sample page and gave it a featured image (for the Cover template), and now THAT image is used for the parallax effect without it also being the background image to the whole page. Much better.

My last question (for this round anyway)…

You mentioned a header image…where would I find the controls for that – in the theme or in Gutenberg blocks? And are we talking about a header for the entire site, or on a per-page basis (the former presumably being part of the theme, and the latter, being in Gutenberg)?

I know how to do that sort of thing old school, but that’s not the purpose of this exercise. ??

Ah, I was speaking of themes in general on the header part, this theme doesn’t have a header image.

The closest here would be the cover template.

If you want to add a image to the header background you can do it by adding custom CSS. As you will see I created a different size image so that it will scale correctly on all displays without cropping.

#site-header {
background-image: url(images/volktoberfest-header-415.jpg);
}

@media (min-width: 700px) {
#site-header {
background-image: url(images/volktoberfest-header-812.jpg);
}

@media (min-width: 1024px) {
#site-header {
background-image: url(images/volktoberfest-header-1024.jpg);
}
}

@media (min-width: 1220px) {
#site-header {
background-image: url(images/volktoberfest-header-1220.jpg);
}

If you want to use a background image in the main body and want the text to remain visible you need to change the transparency of the image to about 30% and then save it as a transparent image (PNG). Your base colors will fill the screen and you will still see the background.

I am tagging along this thread.

I too added a background image as this is what I actually wanted. But I am getting the same text-visibility problem. My though was to have a flat coloured background (that might or might not be semitransparent) around each post.

I have tried playing around with defining a background colour for .entry-content, .entry-header-inner and .section-inner but it is not creating the desired effect. Ideally I would like to have either one block behind the entire post or three – header (title), content and footer (tags) but all three would be of the same width and with the possibility not to have a border/padding between them.

A second question: when defining a background colour I have used a hardcoded colour (e.g. #ffffee) but it would be more ideal to use a theme defined colour e.g. Background, Header & Footer or Primary Colour, so that changing one of those would reflect throught the costumised theme. So my question is: What are each of these defined as in the template?

I added the (simple) custom css through the Customise -> Additional CSS menu.

Where does this end up going? looking at the twentytwenty-child subfolder, it did not end up a new file or being appended to style.css.

I am a total beginner at this, if I have missed the documentation on this, I do apologise, but would be grateful to anyone, who would point me in the right direction!

Thanks in advance!

Jan