Docs

[carbon14]

my site: http://level.dev.iwww.no/laastad-co-velger-level/?cornerstone=1

I want to have an full width background image (or top image) without the need to crop every picture to exact height. I want the image to scale down and keep the top of the image in the same place.

This because i want parallax scrolling effect on the image. I know I can use rev.slider, but for my customer that would be hard to learn and create a rev.slider for every single page they make.

I have tried som codes i found but nothing works. To achieve the height of the image i added a GAP element in the section, but when i scale down the image the gap size stays the same so there is to much space below.

[Rupok]

Hi there,

Thanks for writing in!

It’s causing becuasse you have added this code :

body .x-section.bg-image {
  background-size: contain;
}

In that case you can update your code to following :

body .x-section.bg-image {
  background-position: center center !important;
  background-size: contain;
}

Or it would be better if you use background-size cover as it’s best for responsiveness.

Hope this helps.

Cheers!

[carbon14]

Sorry. I updated with your code but the GAP element is now pushing the image down from the top. What is background-size cover? Is that an element og a class I need to add.

What I want to achieve is placing an image fullwidth with parallax scrolling, that is fixed at the top, but responsive scaling width and cropped from the bottom, and a way to set the height of the image section (for example 500 px) so I don´t need to pre crop the image in photoshop, or use rev.slider.

Hope I explained myself good enough here 🙂

[Rad]

Hi there,

As I understand, you wish to maintain the aspect ratio of that specific section, right? Then what you need is this

body .x-section.bg-image {
    background-size: contain;
    height: 0px;
    padding-bottom: 30% !important;
}

Make sure you remove the gap element. The padding-bottom defines the height instead of actual height. You can change it to your preference. And because it’s value is in percentage, the height will respond as the width change maintaining the aspect ratio.

Thanks!

[carbon14]

brilliant 🙂 thank you

[carbon14]

to quick 🙂 it worked almost perfect, but how can I prevent the image being cropped at the top. ideal would be cropped from bottom. see attached image that on mobile the faces disappear.

[Christian]

Please resize and reupload your screenshots.

Thanks.

[carbon14]

images

[Christopher]

Hi there,

Since you’ve enabled parallax option, we can’t change background position as it breaks parallax effect.

Thanks.

[Author]

Posts