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! 🙂