Setting an advanced background on a Div passes those settings to the parent container

Beta
#1

Repro:

  1. Add a section
  2. Select 2 columns
  3. Add some elements to the first column (headline, button, etc)
  4. Add a Div element below the other elements
  5. Select the Div, and turn on Advanced background
  6. Choose any of the options, and set it up (e.g. select a color, background image, etc.)

Observed:
Even though you’re setting the background for the Div, it seems to pass the settings to the parent element instead. In the screenshot below, I’ve set the Div to be purple. There’s no color set on the background of the column containing the headline, button, & div.

image

Video:

#2

Hey, @devinelston! I think what’s going on here is something Misho mentioned on this thread:

Basically, you need to make sure to have a numbered z-index when using advanced backgrounds because of how they work. New elements use auto for z-index by default for many reasons other than the default of 1 on older elements. We’re working on a way to have it automatically switch to 1 if you turn on an advanced background, but if you manually go set that on your Div it should work as expected.

Let me know if that helps!

#3

Thanks @kory!

Unfortunately, that didn’t work for this one. New video attached.

––

For @misho’s post, I thought that was a different issue – more a matter of how the 3 different Background Layers stack in the Z-index. My understanding was that the plain “Background” color layer was showing up above both the Background Lower and Background Upper layers – but only on Grid Cells. For that, setting z-index:1; for the cell gets it working as expected (I just tried it).

What I’m talking about is a little different. When I put a DIV within a column, my expectation is that the DIV will be able to have its own background settings – independent from the column containing it.

The issue I’m describing is that as soon as you set the Advanced background for the DIV, it seems to pass those settings to the Column instead.

In the repro steps above, I have you put the DIV below other elements within a column so you can see that changing the Advanced Background of the DIV changes the background beyond the boundary of the DIV itself – which is what I’m not expecting to happen.

image

That making any sense? I think it becomes more clear when you see it happen in the builder…

––

Also – and I think this may be a third issue – but the z-index:1; fix doesn’t appear to actually work for the DIV for some reason. In the screenshot below, I have a Grid, Column, and Div set to the exact same background settings (peach color, image, then transparent blue overlay).

I’ve set z-index:1; for both the Grid and the DIV, and it’s working for the Grid (the top one)

I’m inspecting the DIV to show you the settings (including z-index:1;) as well as the fact that the logo and blue overlay are not visible.

image
image854×903 52.8 KB

1 Like
#4

@devinelston, sorry…I also failed to mention that in the Div you have to specify your position. Basically, the Div is kind of an “it’s all on you” Element meant to give people some styling flexibility without having to add a row / column or grid / cell pair and avoid extra markup. So the reason the background was still passing through to the column and the z-index didn’t seem to work is that the default position for the Div is static.

All that being said, I’ve updated the default position of the Div to relative for a couple reasons:

  1. For every other Layout Element, the default value is position: relative; which I believe is a sensible default considering situations like these advanced backgrounds or other content…it is most likely you will want to position a direct child relative to the direct parent.
  2. To avoid further confusion on this, I think it will just help to have it default to relative, and then paired with the script we’re working on that we mentioned in Misho’s post (i.e. auto-changing auto to 1 for z-index when adding and advanced background), this will all just work.

So yeah, if you go back to your example there and make sure to set your position control to relative, you should get your desired result. Moving forward that will just be the default for this Element.

Thanks!

3 Likes
#5

Got it, thanks!

#6

:+1: You’re welcome! We’re most likely going to automatically set a numeric z index (if one isn’t set) when you turn the adv BG toggle on to help avoid more cases like in general.

1 Like
#7

Some adjustments made here in beta7. See: Beta: CSS Grid Cells - Background color is above background layers

1 Like