Support » Theme: Twenty Twenty » Background image screws up text visibility

  • I am trying out Gutenberg and Twenty Twenty. I have been nothing but frustrated with Gutenberg to this point, but for a variety of reasons I am willing to give it a shot with 5.3 and use Twenty Twenty to test it.

    I’m already hitting a wall. Hopefully it’s “just me” and there’s an easy fix. Because the whole idea here is supposed to be to get us out of using custom code for everything, and make it easier….right?

    Ok, well….I added a background image to my test site. It’s a dark image, and all the text on the site is black. (Apparently a11y magic courtesy of Gutenberg…that I can’t change without CSS?)

    (My first thought: Why doesn’t it just fill up the header? Why is it filling up the entire background of the text of the page? That’s just bad form in any case.)

    So… I either need the text to magically turn white (which would still look pretty cluttered OR I need to have a solid (but not necessarily opaque) background for my text, while the image fills the space behind it.

    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?

    Sorry all..I’m not usually a Kranky Kalico, but Gutenberg is trying to kill me, I swear.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    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://wordpress.org/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 1 month, 2 weeks 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. 😉

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    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.

    bryonb0ru

    (@bryonb0ru)

    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);
    }

    bryonb0ru

    (@bryonb0ru)

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.