Height of module background picture

Hi there, I'm having a small problem with my website. As seen in the attached picture, background image of a module gets cut off in tablet view. As far as I see it happens only with this particular module in tablet portrait view.
I've tried changing the image itself and playing with css a bit to no effect.
If access to the site is required please tell me and I'll provide the details.

Could you please post an url to your site?

I've sent you a PM.

I don't see this problem on your homepage. Should I check any subpage?

It's on the homepage.
Did you check it with a tablet or in responsive design view mode on a PC? It's actually OK on monitors, but really noticeable on for example viewport 800x1280.

Ok, I'll report that issue to our devteam.

Meanwhile you could fix it by editing:
templates/gk_quark/lib/framework/helper.layout.php
and finding each:

Code: Select all

@media screen and (


and changing it to:

Code: Select all

@media (


I did that and sadly it makes no difference.

Please do the same change in your override.css (remove screen).

There are still no changes. I tried some other background related stuff in css but nothing helped. Could it have to do with the top (changes as you scroll) value of the background div?

Maybe your phone caches the css? Please clear the cache. It looks completely fine now both on phone and browser with phone emulation on:

Screen Shot 2015-10-27 at 10.21.04.png

As I said before, there never was a problem on a phone, but on a tablet, I even listed the viewport resolution a bit back.
And it is definitely still there (opened with incongnito mode just to be sure).

I'll describe the problem again, so there are no further misunderstandings. I've highlighted the problematic area on the screenshot. The problem is that the module background gets cut off after you scroll down a bit. The button and text are displayed OK, but the background ends somewhere in the middle of the module.
I hope that makes it clear.

I guess it might be a problem with image itself, you need to increase it's height.

Well, you guess wrongly
This is with a random image with resolution 2479x3500. There is no problem with it.
It still cuts the same amount off.

Anyway I've stated in the original post that I've tried different images. That includes ones with bigger resolutions. It would be nice if it felt like there actually was some attention given to this. It's a bit irritating to wait several days for a reply and then be told to do something I've already tried and told you about in the first place.

Sorry for late response.
One more thing to check - please edit gk.scripts.js file and find this part of code:

Code: Select all

         parallax_layer.css({
            'width': '100%',
            'height': '130%',
            'position': 'absolute',
            'z-index': '0',
            'top': '0',
            'background-size': 'cover'
         });


now change height to 150% or even more. It should help, but because I can check it only for one particular module please verify if it will not break anything on desktop/phone screen sizes.

Okay, that helps.
It doesn't really break anything, but all images are then so zoomed in it almost hurts the eyes
So I've overriden the css with !important just for parallax background element in this specific position and screen size.
If there is some issue in the template itself it would be nice if it'd be fixed and updated so it doesn't occur again.
I'd say that the problem is solved for now.

The problem is generally caused by image size. All parallax elements uses same settings for displaying images, so when you mix images that are panoramic with portrait, something will not work right. But to be honest it's not an issue with template but with this particular set of image sizes. So at the end - this customisation that makes it work on your page is the best available option, sorry it took so long to figure it out.

Ok than. Thanks for the help.

No problem. If you have any additional questions regarding this topic, please let me know.