How do I make a image fixed when scrolling?

Tourist
52 0 1

I tried to make the map image in the picture fixed by adding a line in my scss:

background-attachment: fixed;

Screenshot_2019-07-31 Waffen Paar KG(2).png

I added the code in my css under:

.map-section__image {
  height: 100%;
  position:relative;
  top: 0;
  left: 0;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

but ir does not work..

any ideas?

0 Likes

Hi,

 

Don't worry share your store URL and grand me permission I will fix it for you.

 

TIA

Thanks & Regards
Perennial Solution

Email: infoperennialsolution@gmail.com
https://www.perennialsolution.com/
0 Likes
Tourist
52 0 1

I do not have the permission to do that but i can give you my scss, it should be under the map section i guess.

 .map-section--load-error & {
    position: static;
    transform: translateY(0);
  }
}

.map-section__link {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  max-width: none;
  width: 100%;
  height: 100%;
  z-index: 2;
  @include transform(translateX(-50%));
}

// Optically center map in visible area with
// extended height/widths and negative margins
.map-section__container {
  max-width: none;
  width: 100%;
  height: 55vh;
  left: 0;

  @include media-query($medium-up) {
    position: absolute;
    height: 100%;
    top: 0;
    // map is centered on resize, larger widths allow pin to be off-center
    width: 130%;
  }
}

.map_section__directions-btn {
  [class^="icon"] {
    height: 1em;
  }

  * {
    vertical-align: middle;
  }
}

.map-section__background-wrapper {
  overflow: hidden;
  position: relative;
  @include flex-basis(100%);

  @include media-query($medium-up) {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .map-section--onboarding & {
    min-height: 55vh;
  }
}

.map-section__image {
  height: 100%;
  position:relative;
  top: 0;
  left: 0;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  @include media-query($medium-up) {
    position: absolute;
  }

  // Only show the background image if map fails to load
  .map-section--display-map & {
    display: none !important;
  }

 .map-section--load-error & {
    display: block !important;
  }
}

i can give you the whole scss aswell if you need it

the picture is shown on here:Screenshot_2019-07-31 Waffen Paar KG.png

it is about the map

thank you for your help

0 Likes
Highlighted
Astronaut
834 94 177

I think it'll be too hard to help you if we can't see the store. We need to see the compiled HTML. You can send it to me through a private message if you don't want to post it on here. You will have to enable messaging in your profile.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes