Background ad

Hi David,

Thank you. That's exactly what I needed. However, this solution deactivated some links to the main content of the site (eg author: admin, the first image in the article, the "learn more" button in the sidebar, etc.).

I used the solution from Ying she sent above.
# site-navigation, #page {
position: relative;
}

However, this solution does not work on the banner above the header that I have placed using the hook generate_before_header. Do you know how to fix this, please?

Thank you.
Regards,
Martin Steidl

I have updated the CSS here:

https://generatepress.com/forums/topic/background-ad/#post-1792419

Hi David,

thank you very much. It works now. I'm happy. ;-)

Have a nice day.
Regards,
Martin

You're welcome

Hi David,

you wrote: "DO NOT add any images to the HTML, as you already have your background image - this will just create the Links."

But, Is it possible to add an image to this code when editing the CSS code?

For example:

<div class="advert-parent">
<a href="https://www.seznam.cz/"> <! - advert link -> </a>
<div class="advert-filler"> <! - advert spacer -> </div>
<a href="https://www.seznam.cz/"> <! - advert link -> <img src="https://dlazbazamkova.cz/wp-content /uploads/2021/07/2.jpg" /> </a>
</div>

Can CSS be added for .advert-container lhs and .advert-container rhs? I need the left image to be anchored to the top right and the right image to be anchored to the top left. Images should be a fixed size. When you resize pages, they should not resize and do not move.

Now I see this:
https://dlazbazamkova.cz/prvni-prespevek/
I need it to look like this:
https://stavimbydlim.cz/prumerna-spotreba-vody-na-osobu/

Thank you in advance for your advice.
Have a nice day.
Regards,
Martin Steidl

Hi David,

you wrote: "DO NOT add any images to the HTML, as you already have your background image - this will just create the Links."

But, Is it possible to add an image to this code when editing the CSS code?

For example:

<div class="advert-parent">
<a href="https://www.seznam.cz/"> <! - advert link -> </a>
<div class="advert-filler"> <! - advert spacer -> </div>
<a href="https://www.seznam.cz/"> <! - advert link -> <img src="https://dlazbazamkova.cz/wp-content /uploads/2021/07/2.jpg" /> </a>
</div>

Can CSS be added for .advert-container lhs and .advert-container rhs? I need the left image to be anchored to the top right and the right image to be anchored to the top left. Images should be a fixed size. When you resize pages, they should not resize and do not move.

Now I see this:
https://dlazbazamkova.cz/prvni-prespevek/
I need it to look like this:
https://stavimbydlim.cz/prumerna-spotreba-vody-na-osobu/

Thank you in advance for your advice.
Have a nice day.
Regards,
Martin Steidl

Add this CSS to your site:

.advert-container img {
    object-fit: cover;
    object-position: left top;
    height:100%;
    width: 100%;
}

This will force both images to fill the space and left align them.
To if you want the left hand advert to align right then add this CSS as well:

.advert-container.lhs img {
    object-position: right top;
}

Hi David,

thank you for answer.

Unfortunately, as you zoom in and out on a Web page (CTRL + sroll), the images also resize.
Is it possible that the images are still the same size?

Check this: https://dlazbazamkova.cz/prvni-prespevek/

Thank you in advance for your advice.
Have a nice day.
Regards,
Martin Steidl

Not using that method. The object-fit property has various options you can play with:

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

But the cover method is the only one that will ensure it fills the space without distorting the image.