I am using Cornerstone to try out some new layouts for my blog using parallax scrolling with a background image. However, the background image is getting significantly cropped when I select parallax scrolling. I just want the image to go to the right and left edges of the section and not crop on the sides.

I have tried after searching the forum for similar issues:

.x-content-band.bg-image {
  background-size:contain;
}

AND

.x-content-band.bg-image.parallax {
   background-position: 50% 0px;
}

My URL is: http://lorriegrahamblog.com/ but I am working on an unpublished test post for this, I will include login details in the next reply if you need to look into it.

Thank you in advance!

Since you are using CS, you should add this code :

.x-section.bg-image.parallax {
    background-size: contain !important;
}

Hope it helps.

Sorry that didn’t work. I put the code in the Custom CSS field in the Customizer, was that correct?

It’s as if the image is being stretched to the width of the browser instead of the section container.

Any more suggestions?

Thanks

Upon checking the, the last CSS code you add is not working because you miss the dot (.) from the start when you copy the code.
Please try again and fro this :

x-section.bg-image.parallax {
    background-size: contain !important;
}

To this:

.x-section.bg-image.parallax {
    background-size: contain !important;
}

Hope this helps.

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

div#x-section-2 {
    background-position: 32.5% 0px!important;
    background-size: 1200px!important;
}

Hope this helps – thanks!

Sorry, I got confused, are you sure you are referring to parallax image which doesn’t display full width of image ? As I added the code it shows like this :

Please provide us with screen shot and let us know how it should look.

Thanks.

I want the image to go to cover the whole section as it does now, but it isn’t fitting correctly to the size of the section, it is much bigger.

Thanks a lot