Custom CSS to add background to a block?

  • After extensive trial and error, I’ve managed to change the background colour of a columns block using the custom CSS:

    has-background has-very-dark-gray-background-color

    – could someone tell me:
    1) How do I change this to a hex value, or a colour that isn’t one of the 11 default ones?
    2) How do I change this to a background image (without affecting the size of the block) – either with the image scaled to fit, or with the image at its original size, so we only see a small portion of the image?

    Bonus question 3) – why can’t I change the background colour like I can for a paragraph block? And why is such a simple thing like ‘background image’ so unintuitive to implement?

    Thanks in advance – I’m doing my best with this!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    The columns block needs some work. It’s still very basic in its functionality. It will be improved with new updates.

    Hi @wilx

    On the topic of picking a custom color, there should be a custom color picker in the set of colors, it should be the last item in the color palette. There’s a chance the theme you’re using might result in it being disabled.

    For adding custom css, I’d recommend using an Additional CSS Class on the block you want to style. Here are some steps:
    1. Select the block you want to style, some blocks (like Columns) are a bit hard to select from the visual editor, but you can use the block navigation menu from the top toolbar (the icon looks like three indented horizontal lines).
    2. Once you have the block you want selected, in the block settings sidebar under the advanced panel There’s an ‘Additional CSS Class’ input field, here you can add an extra classname to the block, e.g. ‘custom-background’.
    3. In the customizer, add your styles targeting the additional class.

    Alternatively, you could look at installing a plugin with some third-party blocks. For example this plugin ‘Stackable’ has a container block that lets you set a background color or image and allows you to put a columns block inside it:
    https://www.ads-software.com/plugins/stackable-ultimate-gutenberg-blocks/#description

    Thread Starter wilx

    (@wilx)

    Great! The stackable stuff is perfect for now. Thanks for your help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom CSS to add background to a block?’ is closed to new replies.