[Support request] Background Images

Home Forums Support Background Images

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1063708
    Rob

    Hi there

    I know I can add Background Images to the body of GP.

    Is there an easy way to have 2 separate images, one left and one right. This way I can have 2 separate promos. Like this site have it.

    http://www.overclockers.co.uk

    Ive tried added it myself, but getting a bit stumped with the CSS.

    Rob.

    #1064105
    David
    Staff
    Customer Support

    Hi there,

    will these only be images or like overclockers an actual clickable banner ?

    #1064236
    Rob

    HI David,

    Ideally clickable, but just images will be OK.

    Thanks for the reply.
    Rob.

    #1064317
    David
    Staff
    Customer Support

    Not simple and generally out of our scope but i like a challenge – so lets see if we can get the basics right.

    1. Create a new Hook Element
    https://docs.generatepress.com/article/hooks-element-overview/

    1.1 Add this for the Content:

    <?php
    if ( !wp_is_mobile() ) {?>
    
        <div class="banner-wrapper">
            <a href="#" class="left-side"><!-- Left Side --></a>
            <div class="spacer-block"><!-- Left Side --></div>
            <a href="#" class="right-side"><!-- Right Side --></a>
        </div>
        
    <?php
    }
    ?>

    1.2 Select after_header hook.
    1.3 Check Execute PHP
    1.4 Set Priority to 25
    1.5 Set the Display Rules for a page you want it displayed.

    And then to test this add the following CSS:

    body {
        position: relative;
    }
    
    .banner-wrapper {
        display: flex;
        position: absolute;
        width: 100vw;
        top: 206px; /* adjust to match height of header */
        bottom: 0;
    }
    .spacer-block {
        margin: auto;
        pointer-events: none;
        visibility: hidden;
    }
    .left-side, .right-side {
        max-width: calc( ( 100vw - 1200px ) / 2 );
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: red;
    }
    @media(max-width: 1300px) {
        .banner-wrapper {
            display: none;
        }
    }
    

    If it works you should have a RED background either side of the page.
    Then its case of setting href links in your anchor tags and applying a background image to the two sides.

    Let me know.

    #1064339
    Rob

    Hi David,

    Thanks for the reply, really appreciate the help.

    Its sort of working,I can see the red, but its only half the height of my page, and its cutting into my main container a little.

    Thanks
    Rob

    #1064374
    David
    Staff
    Customer Support

    I edited the CSS above to make it full height of the viewport.
    I am not seeing the issue with it cutting into the container?

    #1064405
    Dan

    Great solution David – was keeping an eye on this to see if you come up with something – never had any doubt 🙂

    Like Rob am also seeing the red blocks cut into the container – this doesn’t appear to be an issue with the code above or the calc widths but rather the site container being slightly shifted to the left. It could be a result of custom CSS but given Rob and I both seeing it I wonder if it is a result of a general site setting? Mine is set up with content / sidebar.

    In the code above:

    1) Is there a reason why you have the following twice:
    @media(max-width: 1300px) {
    .banner-wrapper {
    display: none;
    }
    }

    2) When adding the CSS to the custom CSS section of customise it warns me about broken CSS but doesn’t actually highlight the line where the problem is. Not sure if that linked to the issue above.

    Hope that helps to nail this solution.

    #1064406
    Rob

    Hi David,

    Please see screenshots to see what I mean.

    https://pasteboard.co/IGR8Ugq.png

    https://pasteboard.co/IGR963p.png

    I too am getting the error, when I remove this line.it seems to go away. It doesnt break the site however if I just ignore the error.

    max-width: calc( ( 100vw – 1200px ) / 2 );

    Rob.

    #1064445
    David
    Staff
    Customer Support

    Tweaked the code above ( or rather added the rule i forgot to paste ).
    You can ignore the warnings on the calc expression its a Level 3 CSS property supported by all browsers but still noted as Candidate Release so the older CSS lints just don’t like em.

    #1064599
    Dan

    Thanks David.

    AS an FYI I am still getting an overlap issue, even with the new code. It isn’t a major issue as I can just adjust the widths of the right and left assets to account for the adjustment needed but wanted to let you know should people raise again.

    I’m also looking to see if I can use a variation of this solution to serve a full width DFP wallpaper ad. If i get it working I will confirm so other people can reference (as I couldn’t see anything specifically about this on the support forum to date).

    #1064660
    David
    Staff
    Customer Support

    Odd – if i set the Calc widths back to 1200px in the dev tools and on my own test site it works.
    Alternative is to use this method:

    body {
        position: relative;
    }
    
    .banner-wrapper {
        display: flex;
        position: absolute;
        width: 100vw;
        top: 206px; /* adjust to match height of header */
        bottom: 0;
    }
    .spacer-block {
        margin: auto;
        pointer-events: none;
        visibility: hidden;
        flex: 1 0 1200px;
    }
    .left-side, .right-side {
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: red;
    }
    @media(max-width: 1300px) {
        .banner-wrapper {
            display: none;
        }
    }

    So the spacer is forced to fill the width of the container and the left right elements occupy whatever is left.

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