Making a parallax background image stay at 100% width when responding

HTML & CSS
, ,
1

Hi there,

I’m using this very simple method of Parallax for a background image.
http://pixelcog.github.io/parallax.js/

It works well only I’d like to tweak it so the image is always full width, no matter what the width of the browser is (rather than cut off the edges and remain full height as you make the browser narrower). I thought I’d be able to do this with CSS alone but I cannot figure it out!

Below is the page I am working on. I have an overlay that is positioned absolutely over the top of the parallax image and 100% width. Both the overlay image and the image behind it are exactly the same dimensions.
http://vurtmedia.co.uk/prev/overlay/

I’d like the overlay to always cover the image behind it exactly. I think by viewing my link it’s quite obvious what I am trying to achieve, I’m just not sure it’s even possible with this parallax technique. As the images are the same size if they resized in the same way this would work. ( I can achieve this easily with just two images and no parallax effect)

Is there a way to do this, or does anyone have any suggestions of a better way? Even doing it vice versa could work - making the overlay fill full height instead of width…

Thanks in advance :slight_smile:

Pat

2

With parallax you’ll need to set a height. for example in the documentation:

.parallax-window {
    min-height: 400px;
    background: transparent;
}

I don’t see anywhere your CSS where you have set a height for your parallax(s), and currently you only have one image, is there going to more images that show up? Otherwise is there really a need for parallax?

3

Thanks for the reply :slight_smile:

I think you’ve misunderstood my question though. I’m trying to make the (under) image full width and the height adjust naturally according to width - basically exactly as the white overlay image does when you resize the browser, so that you never see the under image bleed out of the white if that makes sense. Putting min-height on it won’t affect this this behaviour at all.

Of course parallax isn’t a necessity (it never is) but just a nice touch, I just don’t think what I am trying to achieve is impossible…I’m just missing a trick! Javascript is forcing the image to keep the same height according to viewport size or something, and I can’t figure out how to override this.

5

Here is another link which shows what I am trying to achieve visually:
http://vurtmedia.co.uk/prev/overlay/index2.html

You see if you resize the browser, the image underneath never bleeds out from the edges of the overlay as they are exactly the same size and behave the same on resize. I want it to do exactly this but with the parallax effect of my original link. The reason it’s not working as far as I can see is because jquery is resizing the height of the image to match the viewport size.

I obviously realise I could do this without even using two images if I didn’t use parallax, it’s just something that would work really nicely with the final image I will use if I can get it working :blush:

6

Hi Pat,

I’m not sure if I understand the problem correctly, but I accessed your link and it seems to me that when the browser width is decreased, the overlay is too short and the parallax image underneath overflows it. By adding height: 100%; to #vurtOverlay (at the moment it’s auto) it looks like this problem disappears. However, I’m not too sure the result is ideal. Just check it out.

7

Hi Antonella, thanks for your reply…

Yes you are right - the overlay is too short and the parallax underneath overflows it. Putting height:100% on the overlay does indeed make it stretch over the top, but it distorts the shape of the overlay. So I want to keep it in proportion, therefore it needs to be the other way round - the image underneath needs to be height:auto and 100% (just like the overlay, and just like it does in this example with no parallax http://vurtmedia.co.uk/prev/overlay/index2.html )

But it seems impossible to put auto on the parallax because javascript is setting the height!

8

You can override Javascript by slapping !important on the end of the rule.

9

Thanks for the advice.

Yes I have tried putting height:auto !important; on the parallax underneath, but for some reason that makes it disappear completely! It’s seeming more and more like I’m not going to be able to fix it with CSS and that it’s a jquery trick that will do it…

Any ideas?

10

I agree, that’s why I wasn’t happy with the result. However, the overlay’s height was the only value that wasn’t set inline dynamically with JS. I haven’t gone into the plugin’s code yet, so I don’t know if this suggestion is going to work. However, at the top of my head one way to fix the issue with jQuery would be to get the height of the overlay and then set the height of the parallax image to the height of the overlay using .css()

11

That sounds like the solution! If jQuery could set the parallax to always be the height (and width 100%) of the overlay then this would definitely work. I just have not much clue when it comes to jQuery :blush:

Could you recommend some key words to search for that might be in the syntax for something like this maybe?

12

I’ve just had the chance to look into it and it seems that the element that needs to change height is .parallax-mirror

If you play with media queries and use !important, like Ryan pointed out above, you might be able to solve the problem.

I hope this helps :slight_smile:

13

Thanks a lot for your help, I really appreciate it :slight_smile:

I have actually tried using .parallax-mirror and putting
width:100% !important;height:auto !important;

It just disappears and leaves a big white gap, no idea why this is. I could of course but a fixed height on it, and add lots of break points in media queries but this seems a really clumsy way of doing it. I prefer your idea of using jQuery to set the height according to height of overlay - this would be so much smoother, I’m going to research it although I’m not sure of the syntax to search for!

14

Don’t use auto as the height value, but find a height value that works for that screen size and see how it goes.

15

One more thing. I realize that it could be a bit of a nightmare to adjust the height with CSS media queries every time the design gets messed up. However, the parallax plugin adds the height value to the .parallax-mirror dynamically inline and it might be a bit of a problem to override this with another value using jQuery without changing the plugin’s behavior.

16

Hi again.

If I were to use media query break points every 50 px to change the height would that be overkill?! If not then this could possibly work…

17

I would reconsider the design. It’s only my view, but I wouldn’t go for it. Then again, if it’s really something that you need to do and there’s no other way, go ahead. Another option would be to keep this design only for large screens and get rid of the parallax effect on smaller screens, if this is feasible. I haven’t seen a destroy method on the plugin’s documentation, I’ll check further later on.

18

HI,

Try this.

.parallax-mirror,#vurtUnderlay{
    height:auto!important;
    width:100%!important;
    padding:45% 0 0;    
}
.parallax-mirror img{width:100%!important;height:100%!important}

I think that’s doing what you want.

19

That does it! Is it the padding that makes it work? How did you come up with 45% for the top padding?

It kind of glitches in firefox a bit when you scroll, but other than that it’s what I’m after. Will work on this and report back, thank you so much.

20

I divided the image height by the image width to determine the aspect ratio and used that as the padding value. Percentage padding is based on the width so the element will always maintain the same aspect ratio and then that allows me to place the image at 100% width and height but at the same time maintaining its aspect ratio.

It’s a trick used to scale videos.

It could be done without the padding and addressing all the images but this was the easiest solution.

21

Genius! Thanks :slight_smile:

The firefox glitch is just that the image underneath slightly bleeds under the overlay when scrolling, but I think I can fix this by making the overlay a little bit taller…