Archived topic
Image Opacity breaks layout
9 replies · Started by troyw on February 23, 2023
Hi team,
Not sure what is happening as I have done this before without issue. Its pretty simple stuff, but something weird is happening when I try to add some background shading to an element block.
I have created a Hook Element, which I am using as a header. I have added a background image / Shape, wrote my text over the top and displayed the nice new header to the page. This works fine.
However, as you will see, the image is made up of some transparent shapes and I want to add a little shading in the background, so that the white is not white, it is shaded. Simple right! Well no. If I try to place my container over another container, it doesn't show as a background, it appears below the main container. So instead I have tried to use the Image Opacity, which looks fine in the backend, but when I look in the front end, it pushes by content container to the left of the page. It feels like this is a bug!
Under the selector it reads "Note: This image will sit on top of content inside this Container unless the content has its own Container with "Position" set to "Relative" (Layout panel)".
I'm not quite sure what this means as it is pretty unclear, but I have tried various combinations of setting it to Relative, but it still breaks as soon as I use the Image Opacity control and even if I put the opacity control back to normal the container still remains broken.
All I want to do is have the transparent part of the block, have a background colour? How can I do this?
Thanks
Alternatively, I can get the affect I want using a Block Page Hero, however despite me disabling the page title it still shows up. If I could remove the page title from the top, this method might resolve my issue.
Hi Troyw,
If you're using a Block Element - Page Hero, there should be a disable Title option: https://docs.generatepress.com/article/block-element-page-hero/#disable-title
Have you tried that?
Hey Fernando,
I have enabled 'Disable Title' in the Block element, but it still shows?
OK, so I changed the priority to 1 and added the page header element and it worked.
However, I am also getting the navigation with white background, but I need the transparent one, much like the home page?
To clarify, are you using a Header Element or a Block Element?
If its a Header Element, make sure the Navigation Background color is set to a transparent color: https://docs.generatepress.com/article/header-element-overview/#site-header
If it's a Block Element, try creating a Header Element for that page and enable just the merge feature.
If all else fails, try this CSS:
body:not(.home) .site-header {
background: rgba(201,201,201,0.45);
position: absolute;
top:0;
left: 0;
z-index: 10000;
width: 100%;
}Hey,
As you can see, I have done this, but now I can't access my Page content? It's like there is no longer a page visible, just the header?
Also, I am trying to get a shadow under the header, like the Home page, but it doesn't show up on this new header? This is the CSS I use for the rest of the website, but it doesn't affect the new header?
.site-header {
box-shadow: 0px 4px 2px -2px rgb(0,0,0,.2);
}
.main-navigation.is_stuck.navigation-stick {
box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
}Try the CSS I provided above instead.
Let us know how it goes.
A ha, got it. I had to change the Block Hero Element Hook to 'Before Content'. Now it works.
Thanks
I see. Glad you resolved it! You're welcome, Troyw!