Background image // background-position: 20% 0%

Hi

I have a background image that I’m trying to apply ‘background-position: 20% 0%’ to (because it’s not showing well on mobile) but it’s applying it to ALL background images.

Please help.

I’m using:

}
.x-section.bg-image {
background-position: 20% 0% !important;
}

Is there a way to apply it to all instances of a specific image across the site?

Hey @JonC,

Thanks for writing in.

A better way to approach this is to directly set the background position to the section setting itself since the background position is one of the options available for the section settings like this:

It is not necessary to add custom code to set a background position for the section.

If you want to set the background position setting different for just the mobile site, that is when you have to add a bit of CSS code through the Element CSS of the section. Please try this code:


@media (max-width: 480px) {
    $el.x-section .x-bg div {
        background-position: 20% 0% !important;
    } 
}

Hope this helps.

Thanks - but I do not have this menu?

My screen looks like this:

Hey @JonC,

My apologies, the suggestion I have given will work if you are using the latest version of Cornerstone.

If you want your code to take effect only to a specific section, set an ID to the section then update your code to:


#the-section.x-section.bg-image {
    background-position: 20% 0% !important;
}

The code above assumes that that ID you set to the section is the-section.

If this does not work, please provide the URL of the site in question and mention which section you want to target.

Hope this helps.

Thanks - that’s weird - I have upgraded to the latest version of Cornerstone?!

Is this Pro or something?

Hi JonC,

Sorry for the confusion, I assume the site in question was built from the older version of X (and Cornerstone) so that is why you have the Classic Section.

Jade’s screenshots above are from V2 Sections, If the site is now on the latest version of X and Cornerstone (7.0.4 & 4.0.4 respectively) by default it should use the new V2 Section when you create a new page or add a new section to an existing page.

You can still add a Classic Section to your page while holding down the ctrl or cmd key and clicking the add section in the Cornerstone/Builder, (but we recommend using the V2 Section moving forward).

Please follow the suggestion above of applying ID to your Classic Section.

Hope it helps,
Cheers!

Thanks - is there a simple way to upgrade my old sites to the new components?

Hello @JonC,

Thanks for updating the thread. :slight_smile:

Automatically you can’t upgrade the Classic elements to V2 elements. You will have to manually upgrade clssic elements by redesigning the layout using V2 elements.

Thanks.

Thanks - is there a v2 component for ‘posts’ please - I can only see “classic recent posts”?

Hello @JonC,

Thanks for updating the thread. :slight_smile:

As of today there is no V2 element for posts. We have this already in our feature request list to have V2 element for recent posts. I am not in a position to share the ETA but let me assure you that our developers are at work.

Thanks for understanding.

Thank you.

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.