Home Forums Gutenberg Background color


Background color

  • I would like to integrate a custom colour selection field in my project pages to obtain a customised page background for each project page on Gutenberg.

    Do you know how to do this?

    Olympe Simon

  • Hi @olympesmn

    If you need it on all pages, you don’t need to add the ACF field to a Gutenberg block.

    So add the ACF field and under rules, set the post type to page (assuming it’s pages you need it on).

    In your code, you then call the field like a normal ACF field

    So something like:

    <div style="background-color:<?php the_field('background_color'); ?>">
  • I have tested but nothing changes.
    Can you tell me exactly where I should integrate the code?

    <div style=”background-color:<?php the_field(‘background_color’); ?>”>


    I have created a jQuery “Colour” field. Are we talking about the same thing? I would like that for each published project, the person can select a background colour thanks to the “colour” fields.

    Thank you,


  • Hi @olympesmn

    It really depends on your theme and how you wish to adjust the background colour of the page.

    One option would be to locate the themes header.php file.

    You could then amend <body <?php body_class(); ?>> to <body <?php body_class(); ?> style="background-color:<?php the_field('background_color'); ?>">

    Just as an idea/suggestion as this would save wrapping div tags around the page content.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.