[Support request] background image for a specific page/

Home Forums Support background image for a specific page/

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1379663
    Hazem

    Hello

    Would please help me with the following:

    1- How can I add a background image for a specific page and how can i adjust its opacity?
    2- The footer widgets are not shown in the customizer ? It says “Your theme has 7 other widget areas, but this particular page doesn’t display them” !!

    #1379847
    David
    Staff
    Customer Support

    Hi there,

    1. Which page are you wanting to add a background too ?
    As your home page is using a page builder which overlays the background content, and will hide any image we add to the themes body.
    For opacity you will need to change that in the original image as you cannot apply opacity to a background only to its container which will effect the content as well.

    2. Can you check you have a number of widgets set:

    https://docs.generatepress.com/article/footer-widgets/#global-setting

    #1380143
    Hazem

    Hello David

    I am trying to set a background image for the home page only. and i need to overlay transparant black color on the image so the white text can be clearly shown.

    Thank you
    hazem

    #1380313
    David
    Staff
    Customer Support

    You could do this to add the background image with a 50% opacity black overlay to the Home page body:

    body.home:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://full_URL_TO_BACKGROUND/image.jpg);
        background-size: cover;
    }

    Not sure how your design is intended to be – but you will need to make any other containers with a background color transpatent as well e.g

    body.home .site {
        background-color: transparent;
    }
    #1381696
    Hazem

    Thanks David

    I don’t see the post options so i can go to the style section and a dd a background image ?

    #1381782
    David
    Staff
    Customer Support

    I don’t understand what your mean? That CSS above would add an Image that you specify in this line of the code:

    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://full_URL_TO_BACKGROUND/image.jpg);

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