Home › Forums › Jevelin Theme › Section background image alignment
Home › Forums › Jevelin Theme › Section background image alignment
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!
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
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.
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..
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
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.
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.
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%; }
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?
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?
Same problem.. Any ideas?
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%; }
For some reason it doesn’t work anymore…