1. SP Page Builder 3.x
  2. Sunday, 02 June 2019
You do not actually provide any help with custom.css solutions, but I will now ask you for a hint. Have been searching for it for so long.

I want the background image in a row before the shape.
When I switch on the 'Bring to front' I see in the code:
.sppb-shape-container.sppb-bottom-shape {
     z index: 99999;
}
If I don't use that option I would expect the shape will become visible under the background image.

I already have given a negative z-index to all classes and IDs in that section, but I do not get the desired result

You would help me a lot.
Thanks in advanced !
Attachments (2)
Accepted Answer
The background image is a property of the parent object, inside which the shape is located. It is not possible to place the background property of the parent on top of the child object which is inside this parent.

Therefore, you need to turn off the background images in sections and use the css trick with the :: before pseudo element to visually achieve the look you need. An example for your first section. Paste this code into the custom.css file or in Page CSS field in page property of SP PB

#section-id-1559465340883::before {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 200px;
background-image: url(/nieuweenergieweert/cms/images/zon.-detail-r.png);
background-repeat: no-repeat;
background-position: top right;
background-size: contain;
z-index: 2;
}

http://dl4.joxi.net/drive/2019/06/02/0008/0401/545169/69/8515484f2c.jpg
You should write this code for each section by changing the path to the background image and the coordinates of the position of the pseudo element and its background image. Also, you can place in a separate class, common to all sections propertys, to optimize the code.
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # Permalink
Responses (4)
Hi,

Share your website URL, I will provide you a custom CSS,

Thanks,
Mamun
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 1
Great, I am developing the site localhost, but I have temporarily created a site onlive with the challenge visible.

https://nieuweenergieweert.nl/nieuweenergieweert/cms/
Where can i put the credentials?
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 2
Thank you so much, i realy appreciate !;)
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 3


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.