[Resolved] Element > Page Header > Custom Image size, opacity, repeat

Home Forums Support Element > Page Header > Custom Image size, opacity, repeat

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1316294
    Mark

    Trying to set a small svg as the custom image for the background inside an ‘element’ Global Page Header. The current template has a large jpg picture, too heavy, sitting under a gradient. I’d like to use a lightweight svg and have its opacity turned down so as not to push through the gradient too much, and have it repeat across the screen. And set the size. Ideas?

    I presume I’d have to target this background image with CSS and change the opacity and image repeat, eg:

    
    opacity: 0.3;
    background-repeat: repeat-y;

    but since the chrome inspector cannot see the background image and always shows the gradient instead, I’m flummoxed. Page here: https://gpsites.co/service/style-guide/

    Edit: Aha! I find that you CANNOT adjust a background image’s opacity, worse luck, but I simply got the svg into Illustrator and adjusted it there.

    Now for the size and repeating:

    background-repeat: repeat-y;
    background-size: 300px 100px;

    But what’s the class?

    #1316589
    David
    Staff
    Customer Support

    Hi there,

    you would target:

    .page-hero {
    /* styles for background */
    }
    #1317417
    Mark

    Hmm, does not work when added to Customise ‘Additional CSS’ section as

    .page-hero {
    /* styles for background */
        background-size: 200px 200px;
        background-position: right bottom;
        background-repeat: repeat-x;
    }

    Also does not work if added, as DevTools suggests, as
    .page-hero.gradient-overlay

    However, I can get it to work if I directly edit .page-hero properties using DevTools, so I know it’s possible. But as usual, the difficulty seems to be getting separately composed styling to apply to something.

    I also tried this, but it did not work:

    .page-hero {
        background-size: 200px !important;
        background-repeat: repeat  !important;
    }

    (but it does work in DevTools)

    I also added a special class into the Global Header Element, but even though DevTools lists the class on the page hero, it is not enacted. Stumped.
    Note: this is the site header background I am targeting: https://gpsites.co/service/style-guide/

    #1317795
    David
    Staff
    Customer Support

    Can you link me to your site with your latest CSS added so i can see what the issue is ?

    #1318429
    Mark

    Dave, I was able to get this to work, but only when I added the CSS into an actual page (using Simple CSS plugin), not into the general Customise additional CSS section.

    .page-hero.gradient-overlay {
    background-repeat: repeat;
    background-size: 200px 200px;
    }

    Maybe this highlights a possible design flaw in the GB theme: the Elements, with their CSS, appear to be injected later in the cascade than the ‘additional CSS’ from the Customise section, thus overriding them. This would not be a problem if the Elements allowed for the inclusion of more options, such as the ones I’m trying to manipulate.

    From my POV, adding the CSS into every page is not a viable solution.

    As far as a link to my site, I am using the template (link above) with almost no modifications yet, so using that template is the same as using my site.

    At this stage I’m thinking of giving up here and just using a big jpeg in the hero.

    #1318861
    David
    Staff
    Customer Support

    GP generates an inline style element called generate-style-inline-css. This includes any of the CSS generated by customizer and by a header element.
    The Customizer > Additional CSS is injected inline to wp-custom-css which comes after the GeneratePress styles.

    So if the above CSS isn’t working then it is either because of specificity, some broken CSS before it or something like a cache plugin is messing within the order.

    #1318896
    Mark

    … some broken CSS…

    Bingo! Brilliant, David. I went through the Customize Additional CSS and found a missing }, probably due to fat finger.

    That’s why it worked when placed in the Simple CSS section, it was not preceded by a glitch there. 😖

    Lesson learned. When CCS won’t work, check syntax of code above, even if that code appears to be working.

    #1318966
    David
    Staff
    Customer Support

    Glad to hear you found the issue !

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