Home Forums ART WordPress Theme Group element

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #30899
    Christopher Christou
    Participant
    Purchased
    Supported

    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

    #30901
    SeaTheme
    Keymaster
    Purchased
    Expired

    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 – FAQsWordPress CustomizationFacebook

    #30902
    Christopher Christou
    Participant
    Purchased
    Supported

    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

    #30903
    SeaTheme
    Keymaster
    Purchased
    Expired
    #30904
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi,

    Still nothing. Sorry, it doesn’t work.

    Regards,

    C

    #30905
    SeaTheme
    Keymaster
    Purchased
    Expired

    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 – FAQsWordPress CustomizationFacebook

    #30906
    Christopher Christou
    Participant
    Purchased
    Supported

    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

    #30907
    Christopher Christou
    Participant
    Purchased
    Supported

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

    #30909
    SeaTheme
    Keymaster
    Purchased
    Expired

    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 – FAQsWordPress CustomizationFacebook

    #30910
    Christopher Christou
    Participant
    Purchased
    Supported

    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

    #30911
    Christopher Christou
    Participant
    Purchased
    Supported

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

    Regards,

    C

    #30912
    SeaTheme
    Keymaster
    Purchased
    Expired

    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 – FAQsWordPress CustomizationFacebook

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!