Trying to fit a large image in hero slider item area (scrolling issue i guess)

Sydney
#1

http://poisemarketingco.com/dev/

Hi.

As you can see, I put a large image in the hero area on the front page but I’m not so sure its working correctly. It seems fine on mobile and tablets… anyway

I put

.sydney-hero-area {
   margin-top: -20px;
   width: 100% !important;
}
.slides-container .slide-item {
   background-attachment: scroll !important;
   background-position: 100% 100% !important;
}

To make the image fit properly with no croppiness… but when you scroll on the page it kinda jumps from the top of the page to the bottom… that weird awkward jump, any way to fix that? I want it to scroll through the page smoothly.

#2

Hello there,

Try adding this CSS code:

    .slides-container .slide-item {
      background-size: contain !important;
      background-position: top center !important;
    }

Regards,
Kharis

#3

Thanks, but doesn’t work, that looks weird.

image
image.jpg1892×740 150 KB

Trying to get it to fit in the entire area.

#4

Sorry for the bump, but does anyone know how to fix that problem?

#5

Hello there,

Try this adding this code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .header-slider .slide-item {
        background-image: none !important;
      }
      .header-slider .slide-item img.mobile-slide {
        display: block !important;
      }
    }

Then you’d have to edit your slide image and not to use square size. Use wider one instead. Try 1200px x 400px.

Regards,
Kharis