Section background image alignment

Home Forums Jevelin Theme Section background image alignment

Home Forums Jevelin Theme Section background image alignment

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
  • SjoerdGerritsen
    Participant

    Hi there,

    I was wondering if I could somehow align a section’s background image to the right. That way I hope to always have the most important part of the image (the right part) visible, whatever the window size. Is this possible? If at all possible right bottom? 🙂

    Thanks!

    Shufflehound
    Moderator

    Hi there,

     

    Sorry, but at the moment this feature isn’t available, but we will try to add this feature in the next theme update.

     

    Best regards,

    Shufflehound team

    SjoerdGerritsen
    Participant

    Is there no custom css thingy I could add?

    If not, when do you think the next theme update will release?

    For now we can try achieving this by developing custom CSS code.

     

    Please share me your site URL where it is displaying and share screenshot of how you want it to display.

    SjoerdGerritsen
    Participant

    test2.sjoerdgerritsen.com

     

    I’d like it to align to the right so I am visible at all times on the picture. You can see in the picture (main) that it’s all good, but once it gets smaller (small), like on a phone, it gets a little odd..

    Attachments:
    You must be logged in to view attached files.

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media screen and (max-width: 480px) {
    
    section.sh-section.sh-section-c02077b9a38c2c03cc171ff9c6baf867 {
        background-size: contain;
        }
    }

     

     

    The feature is implemented in the following latest version of theme.

     


    Please login to access this file

    SjoerdGerritsen
    Participant

    Still not exactly what I’m looking for. I want it to Cover but make the top and right of the image the priority when the website scales down.

    It’s your custom requirement so you have to use custom code to achieve it.

    SjoerdGerritsen
    Participant

    I’m not sure I’ve communicated myself right. I can set a background image AND position for a column. Why can’t I do this for a section?

    You can do that for section in the “Background Image Options” of section Background settings as shown in the attached screenshot.

    SjoerdGerritsen
    Participant

    I don’t see the screenshot? I think what you mean is no-repeat top/right? I’d like the image to cover and do top/right, is that possible?

    Sorry i missed the screenshot. Yes i am talking about that as shown in the attached screenshot.

     

    I’d like the image to cover and do top/right, is that possible?

    Yes then please use the following custom CSS code.

    .sh-section-c02077b9a38c2c03cc171ff9c6baf867 {
        background-position: 100%;
    }

     

     

    Attachments:
    You must be logged in to view attached files.

    SjoerdGerritsen
    Participant

    I have one 1 final question concerning this. When I open my website on my smartphone I’d like myself to be visible, any idea on how we can do this?

    Attachments:
    You must be logged in to view attached files.

    It seems displaying fine for me as shown in the attached screenshot.

     

    Could you please test it using different browser and clearing your browser cache?

    Attachments:
    You must be logged in to view attached files.

    SjoerdGerritsen
    Participant

    Same problem.. Any ideas?

    Attachments:
    You must be logged in to view attached files.

    It seems the CSS code shared above is not working on your live site as section id got changed so please try using below custom CSS code.

     

    .sh-section-5580a5920c048fb85d8b631c3dde0455 {
        background-position: 100%;
    }

    SjoerdGerritsen
    Participant

    For some reason it doesn’t work anymore…

Viewing 18 posts - 1 through 18 (of 18 total)