[Support request] Background Images

[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.

[David]

Hi there,

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

[Rob]

HI David,

Ideally clickable, but just images will be OK.

Thanks for the reply.
Rob.

[David]

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.

[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

[David]

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?

[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.

[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.

[David]

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.

[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).

[David]

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.

[Author]

Posts