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)

Popular choice

Professional Developers At Your Fingertips!

If you need services beyond standard support, we've got your back!

Services we offer:

Demo setup
Advanced customization
Layout adjustment
Graphic work / visualizations
Custom coding
Full WordPress development and design

Services

What we can offer

  • Demo setup +

    If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.

  • Layout adjustment +

    We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.

  • Advanced customization +

    More complex styling changes, theme option modifications, and third-party integrations.

  • Custom coding +

    If you need something that's not included in the theme, we can code it for you.

  • Graphic work / visualizations +

    Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.

  • Full WordPress development and design +

    Full website builds, custom theme development, or plugin creation from scratch.

  • About pricing +

    We'll provide a clear quote based on what you need. No hidden fees.

Professional Developers At Your Fingertips!

Custom Work Form