It is certainly strange. Just with the snapshot’s information, it seems as the image’s container is preventing the image to grow bigger.
Is not the webpage on the Internet so I can have a look?
Regards,
Oscar.
Hi,
The image width should be about 800 x600 pixels.
Your transparent image is too large.
Look how I integreded it as an image widget here set to full width.
Behaves good on mobile as wel:https://logologics.nl/webshop-starter/example-homepage-settings/ ( scroll down a bit to see your image ( took a screenshot of your site and made it about 800 x600.
This happens because the whole transparent image is so large and the small boy and table need to shrink to fit into mobile view.
If the transparant image is smaller and only focusses on the boy and tables, it will show up fine.
I agree with @logologics answer.
@logologics and @omiras sounds like a logical resolution. Unfortunately its not working for me.
I have used a 800*500px image now. Just one image no layers. It still gives me the same issue. Have a look, the links remain the same.
Thanks
@logologics & @omiras Update.
I toggled around with the Featured Image under the Meta settings and the image seems to work now. No clue why. here
Although the image is still of 800x500px, so the BG layer large was ofcourse an issue. But not sure why the image didn’t work without the featured image toggle.
Btw how could I push the image below the header space. The Primary Header is enabled in Meta setting, just that it is transparent. I am on Astra(free) theme.
Thanks
@ananddevops
I notice you are using the Astra theme, so I do not know what settings they have.
I prefer the Elementor and OceanWp theme. Both free, good support and lots of features.
I also notice you are using third party plugins:
nav menu addon for Elementor
header footer elementor
If you would start using OceanWP, you would not need the header footer nor the menu addon. In my experience it is better to avoid third party plugins if it can be done withing the same theme or pagebuilder. That way the developers of that theme or plugin make sure their menu of headers and footers work well together.
Astra might be a good theme as well, but I do not know its ins and outs.
You are talking about the featured image?
Not sure what you have enabled and what and where you are working on, but when working with Elementor on a normal page, you do not need to set a featured image?
1. is this a normal page?
2. would you consider switching to OceanWP theme?
3. where did you add the background image? theme settings or Elementor?
4. did you switch back and forth between gutenberg blocks, default wordpress editor and Elementor?
Annie
Annie ( @logologics ),
Thanks for the detailed note. I am new to WP and to Astra as well. I have invested sometime for Astra and focus at this time is more on WP aspects. Hence changing to OceanWP is surely a consideration, but for the future.
I am using the Astra header options itself an agree that I will need to discuss the same theme people. Just to give a brief about the issue, which could be generic wordpress too –
When I make the header transparent, it moves things up and meny overlaps are issues without manual padding. Which is not great for responsiveness. Making the header trnsparent should just show the BG, not move the space up, so wondering.
As for the original issue, I just toggled the featured image on, added one, and then toggled it to off. Thats it. Will keep observing incase I can determine a pattern for the issue.
Thanks
@ananddevops,
You’re welcome!
I had similar transparant option issues with the Generate Press theme.
I explored and tested it to make comparisson with other theme’s before deciding which one to use in the future. This was taken care of by OceanWP theme by default.
I believe this is resolved now in GeneratePress too, not sure because I decided to go on with OceanWP about 2 years ago now.
Just saying, a theme can make a big difference.
I suppose something in Astra is causing this.
What happens if you install OceanWP and use the transparent header?
You can test this and remove OceanWP after, but this is a good way to see if that issue is coming from the theme or something else.
If it is the theme and you want to keep it, you should indeed consult their support and ask them to resolve this.
Annie
As for the original issue, I just toggled the featured image on, added one, and then toggled it to off. Thats it. Will keep observing incase I can determine a pattern for the issue.
Yes, again I am not familiar with Astra, but maybe they have some homepage specific settings where you need to add the featured image to make it work?
Annie ( @logologics ),
I am surely going to try your suggestions and see how my design reacts. Thank you for taking time to explain each aspect 🙂
