Background color

  • Resolved mica123

    (@mica123)


    1 year, 11 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 1 year, 11 months ago by mica123.
    • This topic was modified 1 year, 11 months ago by mica123.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Tejas Sonawane

    (@tejassonawane21)

    1 year, 11 months ago

    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)

    1 year, 11 months ago

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

    Many thanks.

    Tejas Sonawane

    (@tejassonawane21)

    1 year, 11 months ago

    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

    Tejas Sonawane

    (@tejassonawane21)

    1 year, 11 months ago

    Hi there,

    Could you please verify whether the issue has been resolved?

    Best Regards,
    Tejas

    Thread Starter mica123

    (@mica123)

    1 year, 11 months ago

    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 1 year, 11 months ago by mica123.
Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Background color’ is closed to new replies.