Group element

[Christopher Christou]

Hi,

1) On the group element, if I select a background image but I select lets say 60% height for desktop and 20% height for mobile, is there a way to select which part of my background image actually displays?

2) On the group element, if I select a background image, is there a way to have padding on the left and right of that background image? Not adding a single image in that group element. I would just like to add left and right padding directly on the background image of that group.

Thank you for your help,

Regards,

C

[SeaTheme]

Hi,
1.
Maybe you can achieve it through the CSS property background-position, such as this css code, which means that it is 25% and 75% respectively from the top border and left border of the Group wrap, and you can check the detailed explanation of this CSS property.

.bm-wrap{
  background-position: 25% 75%;
}

Please note that it will affect all the Group elements. You can set an ID Name for this Group, e.g. art1, and when the CSS is upgraded to, it will only affect this one Group.

.bm-wrap#art1 {
  background-position: 25% 75%;
}

2. You can also use this CSS to implement, adding left and right inner padding to the Group element with the ID Name of art1.

.bm-wrap#art1 {
    padding-left: 20%;
    padding-right: 10%;
}

Please note that the above CSS has not been fully tested and it may lead to unknown problems.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Christopher Christou]

Hello,

Thank you for the recommendations but neither point 1 or 2 seem to work. The part of my image that shows doesn’t change and padding is not being added left/right.

I’ve copied/pasted the both CSS but nothing happens. I tried to adjust the values but still no luck.

I also have also tried applying the CSS to all group elements, and also to a specific one with the above ID of art1 and it still doesn’t work.

This is the portfolio page I have set an ID name for a group element as a test.

https://christopherchristou.com/?ux-portfolio=sewing-machines&preview=true&_thumbnail_id=4353

Could you please help?

Many thanks,

Regards,

C

[SeaTheme]

Hi,

Here the position should have a }: https://www.dropbox.com/scl/fi/bhvh2cbg2nenfzgugmf0p/qq20240614152459.png?rlkey=jfvmf6sb83vdaz2okl2ewfhnx&dl=0

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Christopher Christou]

Hi,

Still nothing. Sorry, it doesn’t work.

Regards,

C

[SeaTheme]

Hi,
1.1 The sewing Group mod’s ‘Background Image Fixed’ should be OFF , or the BG image will NOT be scaled
1.2 The width of the sewing Group should NOT with fullwidth , reduce one col to 12-cols
2. find the NEW added CSS:

.bm-wrap{
  background-position: 25% 75%;
}	
.bm-wrap#sewing {
    padding-left: 15%;
    padding-right: 15%;
}

update to:

.bm-wrap#sewing .bm-background-img {
  background-position: 25% 75%;
}	
.bm-wrap#sewing {
    padding-left: 15%;
    padding-right: 15%;
}

DO NOT change other CSS.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Christopher Christou]

Hi,

Thank you for your recommendations.

1.1) I would like to keep the ‘Background Image Fixed’ ON otherwise I could achieve a similar effect by adding a single image (with left/right padding) like I did as a test for the first module of that portfolio page. If this NOT possible, then is there a way to achieve this effect on a single image module (for that image to stay fixed while other modules overlap it while scrolling)?

1.2) Reducing the width to 12 columns makes the whole background module too narrow, which is not what I had in mind. I would basically like for the background module to have left and right padding at 15 so it can align perfectly with (A) my logo on the left of the header and the cart icon on the right of header, and (B) with all the other modules that I am currently using with 15/15 left/right padding (grids, sliders etc).

Regards,

C

The width of the sewing Group should NOT with fullwidth , reduce one col to 12-cols

[Christopher Christou]

Sorry ignore the last sentence: The width of the sewing Group should NOT with fullwidth , reduce one col to 12-cols

[SeaTheme]

Hi, welcome

It is not possible to set the padding if the ‘Background Image Fixed’ is enabled.
You can try to set the background size, it might also meet your requirements.

Delete the CSS for the internal spacing :

.bm-wrap#sewing {
    padding-left: 15%;
    padding-right: 15%;
}

Add the CSS for the background size:

.bm-wrap#sewing .bm-background-img {
  background-size: 70%;
}

You might need to adjust the value of the background-position(the number of 25%) to align other elements.
The width of the sewing Group should be set fullwidth with the new CSS.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Christopher Christou]

Hi,

Thank you. This seems to work but when loading the page the background I have set (98%), the background starts wider than this value and as you scroll down it gets reduced to the correct width automatically. This looks like a glitch. (1) Is there a way to have the background image to appear to the correct value I set immediately when the page is loaded and to remain that size? This glitch can be seen when the page is first loaded or when you refresh the page.

(2) Another thing, at the moment there is a white gap between this background module and the next module (slider). I would like to keep that gap but when you scroll down for the gap to disappear as the slider module moves over the background module. I have checked and there is no gap set for either of the two modules, no top or bottom spacing either. I think the gap is on the slider module because I have placed this slider module inside a group so I can adjust left and right padding again. The slider module does not fill the full height of the group module, leaving this gap which moves together with slider module as you scroll. How can I adjust the slider to take the whole height of the group module?

Many thanks again,

Regards,

C

[Christopher Christou]

Oh and the CSS for the background size does not seem to work for mobile.

Regards,

C

[SeaTheme]

Hi, welcome
I tested your web page. Due to some limitations of the CSS property ‘background-attachment:fixed’ , such as its inability to be well compatible with some CSS animation properties(page loading/menu panel opening). This is caused by the limitations of CSS itself. It seems that your requirement cannot be achieved in this way. Regarding the fixed for the single-image you mentioned earlier, it is also impossible to achieve through quick CSS.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Author]

Posts