Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Background-image before Shape

Featured Lock Resolved Issue
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)

  • desired result.png
    desired result.png 458.7 KB
  • unwanted result.png
    unwanted result.png 393 KB

5 Answers

Pavel

More than a month ago #Permalink
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.

Al Mamun - Staff

More than a month ago #Permalink
Hi,

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

Thanks,
Mamun

Boy Kollee

More than a month ago #Permalink
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?

Boy Kollee

More than a month ago #Permalink
Thank you so much, i realy appreciate !;)


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

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 119
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 107
Toufiq

Toufiq

Total Accepted Answers: 91
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 3
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

295923

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us