gutenberg / weaver extreme : how to control visible part of cover image?

[kiwimef]

Hi scrambler,

i am not sure if this is a gutenberg only or a gutenberg/weaver extreme combination issue.

how can i get the whole image to be displayed when using “cover image” block and set the background to “fixed”? everything is fine as long as the background is not fixed. as soon as it’s set to fixed, only a small part of the image gets displayed. Is this a bug or something I am doing wrong? I have tried all sorts of image sizes and ratios, no success, it is somehow not controllable to me.

http://family.3kiwis.co.nz/?p=5407

if this is “gutenberg only” and you are – understandably – not doing the support for them, could you point me to a support forum similarly helpful to this weaver forum as I have not found anything similar to this here?

thanks again for your help & patience

[Weaver]

This is actually a general HTML question!

And we’ve explained this issue in other threads.

But I’ll try a short answer as it will apply to my new Designer Blocks plugins soon to be released.

A cover image (more technically specific, it is the HTML/CSS background image) is for the specific <div> it covers. A fixed bg image will typically be setup to cover the entire background of the browser page. There are different scaling things going on – browser height, browser width. And if you use the same bg image from different elements on the same page, all the fixed images will cover the same part of the page.

Turns out the demo of my All-In-One Block demos all of this. See the same Hubble Deep Field image used by several instances of blocks. You can see different parts of the normal “scrolling” bg images used with different heights specified in the 2nd and 3rd examples – and see how they scale slightly differently to fill that height. And then look at the parallax versions below it. Note that even all of those examples independently specify the fixed (parallax) bg image, that image is scaled exactly the same for each, and you can see the various galaxies, etc. stay in a fixed location behind all the examples as you scroll the page. And you can see interesting scaling effects if you make your browser window taller or shorter.

 

https://www.seroundtable.com/google-h1-tags-23699.html

While that was not my intent, the example also does clearly show how a bg image works in various configurations.

[Weaver]

For your use case, you don’t want to use a bg image, but a regular responsive image that will resize as you scale the browser. There are full width options for displaying the header image that should handle this situation, and Weaver Xtreme V4 will have even better options.

[scrambler]

looking at your site, I am not sure I understand what image you are referring to.

The only one I see is the parallax section at the top which displays as intended.

But weaver is right, background-attachment: fixed; refers to the Viewport not the container.

You may want to try and explain what effect you are after, because cover and fixed inside a limited size container does not quite make sense.

Let us say you have a 500px x 500px box and you put a background on it. If you say cover, you ask for the image to be scaled up until the whole area is covered by the image.

If you wanted fixed, that would mean you want the image to not move up when you scroll, but then that would leave a gap with no image which is contrary to cover.

[Weaver]

My comment about the bg image were referring to the link in the first post of this thread, which shows what appears to me to be a header-like image displayed as a bg image with some figures and words (e.g. Critical thinking & problem solving). I can see upon closer inspection that that image is cut off at the top. But the real design goal would be useful to know.

[kiwimef]

thanks to both of you for your explanations.

I have actually tried two different ways to achieve this parallax effect, but I would like the whole image to be visible.

1. method: i have used the gutenberg block called ‘cover image’ which produces that parallax effect when you set the background to “fixed” in the inspector at the right hand side as well as some text floating on top of the cover image. (i did not use that txt, just left it blank). when you insert the image into that “cover image” block, everthing is fine. the moment i set the control to “fixed” the image gets blown up and cut off. As well it does not cover full width (what would be desirable).
2. method: the weaver parallax post, works much better (or i am missing outon something when using method 1). now the image covers full width, but the container with the text doesn’t. i have set container and content to wvrx-fullwidth on the per page options for the page where the posts are shown. How can i get rid of that shadow around the container? i have tried something like #container{box-shadow:none} but that didn’t work, probably wrong syntax.

For now I have left both methods on that page. The page shows 2 posts; for now i left both methods in that first post: the first image (“critical thinking” etc)  is inserted “the weaver parallax way”, the second image (“critical thinking” again) is inserted in the gutenberg block “cover image”, the third image (2 school kids) belongs to the second post and is again a “weaver parallax post”.

I hope this is not too confusing, but didn’t knwo how to show what i mean.

What i would like to achieve is for the critical thinking image to be displayed completely and not cut off at the top, no matter if it’s done with gutenberg or weaver. apart from that i would like – for this page – to get rid of that shadow around the text.

http://family.3kiwis.co.nz/?page_id=412

one last question:

is it not possible to create pages with gutenberg, just posts? if not is it intended in the future?

thanks for your patience,

 

[scrambler]

The shadow is an option set on the post in Main options > Post Specifics page, remove it there.

Did you want the text to also be full width?

For the Gutenberg questions, you will need t ask them

[kiwimef]

thanks,

but when i turn off the shadow in main options, it will disappear on all posts. i want it to go away only on this page.

[scrambler]

Add the rule below in the theme Global Custom CSS Rule;e box

.page-id-412 .post-area {box-shadow:none;}

 

 

[kiwimef]

thanks a lot. that’s what i needed.

[Author]

Posts