Responsive Nested Layers

[lpug]

Hi I havent used this software for a while and just about to start another project, I've been fiddling with an idea but cannot get it going. I will provide a simple explanation that will help to explain what Im wanting to do.

I have 1 layer set to relative horizontal sizing and styled the background with an image of a face and set the horizontal and vertical to centre and size set to cover.

This method allows to have a responsive background across many breakpoints. What I' trying to do is is insert another layer on the background and blank out the eyes on on the background face, the issue is when I preview it the secondary layer is not blanking the eyes but off to one side. Ive tried by trial an error selecting and/or deselecting so many options but cant get this to work effectively.

Is there a more efficient way to do this....layout grids dont provide the same level of flexibility as do layers.

So in a nutshell I want to maintain position of 2 layers nested within each other?

Hope this makes sense, alternatively I can create a dummy project to demonstrate my issue.

Thanks

[Pablo]

I do not recommend to use layers for this purpose,.
I suggest to use layout grids instead.
Layers are fixed/absolute containers. Nested layers are not officially supported.
Layout grid are floating/flexible containers.

[lpug]

Thanks, I struggle with layout grids, every time I insert an image in a grid it doesn't show in preview. With my example do you think i can do it with grids? Set a responsive full width background image and then overlay another image or text over that?

Thanks in advance

[Pablo]

If the image is not displayed then maybe the filename is invalid?

Layers are not meant to be used for flexible layouts. A layer itself can be full width, however the content will not be flexible.

To implement rollover images, the 'Rollover image' object may be useful.

[lpug]

Pablo Ive never had luck with layout grids, and its the same now.
I have dropped a layout grid and converted into a single row
I then styled an image called background.jpg (1920X800) into the layout grid, no repeat, horizontal and vertical set to centre and size set to cover.
In design view I can only see about 50px wide and in preview mode I see nothing, I want a fullwidth responsive image.
What am I doing wrong?
BTW - Can you have layers nested within layout grids? otherwise how to overlay objects on layout grids?

To make it easier here is my test project https://www.dropbox.com/s/pcg7jx30xzfb4ra/test.zip?dl=0
I had to insert 800px as padding to see image in display mode, as a test I have a layer over the eyes of the image, but the layer is not responsive.

[Pablo]

In design view I can only see about 50px wide and in preview mode I see nothing, I want a fullwidth responsive image.

An empty layout grid has a height of 0 pixels, the height is controlled by grid's contents.
So, you will need to place something inside the layout grid.
If all you want is a full width flexible image then use a transparent line as place holder or simply set the column height of the layout grid to 'fixed'.

Note that there are many examples how to use Layout Grids:
http://wysiwygwebbuilder.com/templates9.html
http://wysiwygwebbuilder.com/templates8.html
http://wysiwygwebbuilder.com/templates0.html

Can you have layers nested within layout grids? otherwise how to overlay objects on layout grids?

No, you cannot put a fixed/absolute container inside a layout grid, that would break the flexible structure.