[Resolved] Background overlay in background – content

Home Forums Support [Resolved] Background overlay in background – content

Home Forums Support Background overlay in background – content

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #791367
    Diego Fernando

    Hi.

    I am currently using the background module. I was wondering if it is possible, as if it happens in the header module, if I can use an overlay color with background, which would be on the content.

    Thanks

    #791390
    Leo
    Staff
    Customer Support

    Hi there,

    We would have to use CSS for that.

    Which page are you referring to? Not seeing background image on the home page.

    Let me know πŸ™‚

    #792725
    Diego Fernando

    Hello Leo.

    I was considering the option but I did not find it, so in the end I did not fix the background.

    If you have the css, I would like to have both options, how would it be for the all web? How would it be for specific web pages?

    A greeting.

    #793016
    Leo
    Staff
    Customer Support

    Which background are you referring to?

    The body background?

    Can you apply it so I can just give you the full code?

    #793990
    Diego Fernando

    Hello Leo. Yes, I’m referring to body background.

    Please look the website, I’ve changed it. I want body background with an overlay color.

    Thanks.

    #794002
    Leo
    Staff
    Customer Support

    Try this CSS:

    body {
        background-image: linear-gradient(0deg,rgba(36,55,67,.76),rgba(36,55,67,.76)),url(https://cdn.shortpixel.ai/client/q_glossy,ret_img/http://www.historiadeloscomics.com/wp-content/uploads/2019/01/marvel-1641554_1920.jpg);
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know πŸ™‚

    #794313
    Diego Fernando

    Hello Leo. Thanks, that’s I wanted.

    Leo, is there a possibility that this will NOT apply to specific pages?

    Maybe have the space to place the page-id where I do not want to have that change.

    #794648
    Leo
    Staff
    Customer Support

    You can use the :not selector like this:

    body:not(.page-id-123):not(.page-id-456) {
        background-image: linear-gradient(0deg,rgba(36,55,67,.76),rgba(36,55,67,.76)),url(https://cdn.shortpixel.ai/client/q_glossy,ret_img/http://www.historiadeloscomics.com/wp-content/uploads/2019/01/marvel-1641554_1920.jpg);
    }

    Just replace the 123 and 456 with the actual page ID that you would like to replace.

    The other method would be to target specific page that you do want the background image/overlay:

    body.page-id-123 ,body.page-id-456 {
        background-image: linear-gradient(0deg,rgba(36,55,67,.76),rgba(36,55,67,.76)),url(https://cdn.shortpixel.ai/client/q_glossy,ret_img/http://www.historiadeloscomics.com/wp-content/uploads/2019/01/marvel-1641554_1920.jpg);
    }
    #794936
    Diego Fernando

    Thank you Leo.

    I can do it with your help.

    #795033
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

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