Background color

  • Resolved mica123

    (@mica123)


    5 months ago

    Hello,

    I am trying to use the gradient CSS to color the background of one page. I managed to do this with this code:

    .site {background: #000000;}

    However, it does not color the footer. I need to have the color cover the whole background of the page from top to bottom. I need this as I would like to use the gradient CSS for the whole background.

    I hope you can help.

    • This topic was modified 5 months ago by mica123.
    • This topic was modified 5 months ago by mica123.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Tejas Sonawane

    (@tejassonawane21)

    Hi @mica123,

    We understand your concern,

    In this scenario, you need to target the footer tag and make its background transparent.
    With this, whatever background color/gradient you apply to the “.site” class will be applied to the footer too.

    Please make use of the below provided CSS code.

    footer {
    background-color: transparent;
    }

    Hope this works for you.

    Best Regards,
    Tejas

    Thread Starter mica123

    (@mica123)

    Thank you, I’ll try it. Should I also make the header’s background with the menu and logo transparent as well?

    Many thanks.

    Hi @mica123,

    You can make the header transparent through the customizer.
    Please follow the below steps:
    1) Dashboard -> Appearance -> Customize
    2) Header -> Transparent Header -> Enable on Complete Website

    Your gradient will now be applied to the header as well.

    Hope this works for you.

    Best Regards,
    Tejas

    Hi there,

    Could you please verify whether the issue has been resolved?

    Best Regards,
    Tejas

    Thread Starter mica123

    (@mica123)

    Thank you. I only had a chance to work on it yesterday. I needed this only for one page, not the whole website. The code for the footer did not really work on it own – and not without adding !important, so I finally ended up with this code that encompasses all the necessary elements to work together:

    header, .entry-content, footer, #post-xxx {
    background: transparent !important;
    }

    Many thanks for your help.

    • This reply was modified 4 months, 3 weeks ago by mica123.
Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.