Image size issue with parallax effect

Question

I am having problem with background-attachment:fixed. When I use this property then the image size gets bigger.

How can I keep the image size in normal ratio but using parallax effect.

Code:

<div class="full_width full-bg">
    <div class="contact-banner ratio4_1"></div>
</div>
<div style="margin-top:3rem;"></div>
<div class="full_width full-bg">
    <div class="contact-banner ratio4_1 parallax"></div>
</div>

Demo: https://jsfiddle.net/squidraj/w7rxv5xj/embedded/result/

Editor: http://jsfiddle.net/squidraj/w7rxv5xj/

I want to keep the image size as first one but would like to apply parallax effect.

Any help is highly appreciated. Thanks in advance.

Fabrizio Calderan · Accepted Answer · 2015-03-24 11:55:14Z

4

set background-size: 100% auto for .parallax class

.parallax {
   background-attachment:fixed;
   background-size: 100% auto;
 }

Fork: http://jsfiddle.net/r7oyxL92/

answered Mar 24, 2015 at 11:55

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raj Over a year ago

I tried using 100% auto but in that case there are some white space left at the bottom and when you scroll then you can see the white space at the top of the container. But if I use background size cover then I don't see the white space but the image seems to be larger.

Raj Over a year ago

Sorry my mistake. The banner image itself was short in height. So stupid I am. Thank you so much for your help.

Collectives™ on Stack Overflow

Image size issue with parallax effect

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related