Top Banner background image will not cover the entire page

Hi Michael,

Since the top bar has a default contained width, a better approach to this is to create a custom hook Block Element and hook it to somewhere like “before_header”.

See this for reference: https://share.getcloudapp.com/P8u6QA9e

Using a container and setting the image to its background image is one approach to having a banner that stretches out 100%. You’ll simply need to add a specific top-padding to make the image appear.

See this for reference: https://share.getcloudapp.com/E0uoy0Yv

Also see: https://share.getcloudapp.com/12u0L2PW

Also see: https://share.getcloudapp.com/BludGldj

On the other hand, if you want the image to display with a perfect aspect-ratio, you’ll need a setup like this: https://share.getcloudapp.com/9ZuDoZmq

Then you’ll have to add a CSS class like this: https://share.getcloudapp.com/xQuzw1xN

After that, you can try adding a custom CSS like this:

.img-topbar {
margin:0;
}

.img-topbar img{
    width:100%;
    height:auto;
}

Here is a link you may refer to with regards to adding custom CSS: https://docs.generatepress.com/article/adding-css/

Hope this helps! :)