Edit Cornerstone Page Background Image Position

I am looking for the CSS code to change the background-position of the background image for a page in Cornerstone.

I would like the image to be displayed top center instead of bottom center or center center to fix how it is appearing on the screen for larger windows.

Hello @powersnw,

Thanks for asking. :slight_smile:

You can use Google Chrome inspect element tool to find out the element id and supply the necessary Background CSS positioning property to align. I am sharing few resources that can be used to get started.

  1. As you are looking to change positioning of a specific page, you will need to prefix the CSS class with page id. To find out page id, please refer following article. https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59
  2. Use Google chrome to find out element id and then proceed to write the necessary CSS. Here is a video to get started with Google Chrome dev tools. https://www.youtube.com/watch?v=wcFnnxfA70g&t=155s
  3. Then use CSS positioning property to position background image as per requirement. https://www.w3schools.com/cssref/pr_class_position.asp
    https://developer.mozilla.org/en-US/docs/Web/CSS/position

If you have any issues please share exact page url.

Let us know how it goes.

Thanks.

I have searched every div in Chrome and cant find the reference to the bg image. The only reference is a script…

 <script>jQuery.backstretch(["https:/image-url-here.jpg"], {duration: 1000, fade: 750});</script>

So can someone please direct me how to add css to this? No div id or div class… at least that I can see. Its the main BG image set in the WP page editor for the page.

Hey @powersnw,

Look for the backstretch div.

Its position is dynamically calculated by the script so you need to override it with CSS. Try adding this code in Appearance > Theme Options > Global CSS

.backstretch img {
    top: -100px !important
}

Thanks.

Hi Christian, I searched the pages code for that div and nothing came up only the script, however I added that CSS and it worked perfectly, thank you!

Glad we could help.

Cheers!

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