[Lorrie GParticipant]

Hi there,

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!

[Lorrie GParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

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

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

Hope it helps.

[Lorrie GParticipant]

Hi,

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

[LelyModerator]

Hello Lorie,

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.

[Lorrie GParticipant]

Sorry that’s still not working. The only thing it does is move the left margin in about 20px…

[John EzraMember]

Hi there,

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!

[Lorrie GParticipant]

Sorry that STILL isn’t working?? 🙁

[ChristopherModerator]

Hi there,

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.

[Lorrie GParticipant]

Here is a screenshot of what I am seeing, the background image is stretched and has become pixelated.

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

[ChristopherModerator]

Hi there,

This is limitation of background image property, you can’t keep image background full width and at the same time with appropriate proportions in width and height.

You can try following code one by one and see which one is better work for you :

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

You can try this code as well, it changes background image position horizontally :

.x-section.bg-image.parallax {
    background-position-x: -154px !important;
}

Hope that helps.

[Author]

Posts