-
Hi,
I have a grey wave background image showing on top of every page & post of my website. Mobile view uses a different variation of the wave, another image.
See here desktop view https://snipboard.io/NVGAZI.jpg
See here mobile view https://snipboard.io/r1ylIB.jpgHere is the CSS for it.
.header-wrap{
background-image: url(“https://www.hundetraining-mit-roya.at/wp-content/uploads/2023/05/wave_transparent_3.png”);
background-size: 100% 100%;
background-repeat: none;
padding-bottom: 70px;
}@media (max-width: 480px) {
/* CSS in here for mobile only */.header-wrap{
background-image: url(“https://www.hundetraining-mit-roya.at/wp-content/uploads/2023/05/wave_transparent_mobile.png”);
background-size: 100% 100%;
background-repeat: none;
padding-bottom: 70px;
}}
The pages other than Search Results, No Search Results, 404 Template, Author Archives and Front Page use a page header element, see screenpic https://snipboard.io/lPF8XG.jpg
Here is the screenpic of the page header element settings https://snipboard.io/NEQmeF.jpg
This page header element uses a shape of a grey wave, see element settings here
for desktop https://snipboard.io/HQOKvl.jpg
for mobile https://snipboard.io/Cy9UhQ.jpg (tablet settings are the same except height is 160px)I would like to know if the wave shape in the page header element is actually duplicated (second one hidden behind) on those pages, since the CSS seems to apply site-wide. (is it?)
If yes, should I remove the shape 1 (grey wave shape) in the page header element?
If I do this, would I need to reset the top padding values of the content?
The wave in mobile view is the second version of the wave as stated in the CSS above “https://www.hundetraining-mit-roya.at/wp-content/uploads/2023/05/wave_transparent_mobile.png” SITE-WIDE.
The page header element in element settings show the wave shape for mobile still the original shape, which is not seen in the browser (it should not be used and might be hidden), see same screenpic as mentioned above https://snipboard.io/Cy9UhQ.jpg.
Thanks!
Please see link to site below.
-
Hi Mel,
No, it’s not duplicated.
Mobile background overwrites the Desktop wave.
It’s not on top of one another. Rather, the Desktop wave is replaced with the mobile wave. Only one image exists at a time.
-
Thanks,
So even for desktop there is only one wave?
As the CSS for desktop already sets a background image plus there is the Wave shape set for the pages using the page header element.
-
Can you share a screenshot of the two background images your referring to in the backend?
-
Here are the 2 background images in the Media Library. They are added as a .header-wrap to the site in the CSS I pasted in my first post.
for desktop & tablet: https://snipboard.io/7ehuAw.jpg
for mobile: https://snipboard.io/y0VZrc.jpgBUT (and that’s why I suspect the image duplication):
There is also an active page header element: https://snipboard.io/dC2lQj.jpg
(Block – Page Hero) set for entire site except Search Results, No Search Results, 404 Template, Author Archives, Front PageSee the grey wave shape in the page header element content editor: https://snipboard.io/NfbiBv.jpg
It is the same for desktop, tablet and mobile in the content editor. (In tablet settings this shape has height: 160, in mobile settings height 100.) -
I’m not seeing the one from the Block Element – Page Hero.
All I’m seeing is the one from the Header Element so as of now, there’s no duplication. If you can share admin login credentials, I can double-check.
-
Hi again,
I actually saw the duplicate wave shape that was hidden behind the one set as background image by CSS (as sticky header) when I scrolled on my ipad mini.
The CSS set the background image to the entire site.
I would like to test taking away the wave shape for the page header elements it is used for, to see if the wave background image set via CSS still remains (it should). I will clone the elements first just to be save.
My question is, if I delete the wave shape in the element settings, would it delete the shape all together for the whole site? Or only for this element? Can it be re-selected again for this element after it is deleted?
Please see screenpic https://snipboard.io/xLD4yI.jpgThanks.
-
Hi there,
Shape in the elemnent.
If you delete the shape it will only remove if from that element.
And after you delete it you can re-select it again. -
Thanks for all your help.
I deleted the wave shape in the Elements as it was duplicated behind the CSS that set the wave as a background image.
All good.
-
Glad to hear that
- You must be logged in to reply to this topic.