YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar messagedj asked

Parallax Background image Position

Hi, i have this issue that i can't figure out.

i use this code:
<div class="uk-margin uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle" data-uk-parallax="{y: '-200', viewport : '0.5'}" style="height: 420px; background-image: url(<?php echo $coverphoto; ?>);"></div>

it is working almost perfectly, only thing is , the image background position starts at :
background-position: 50% 0%

i like the parallax background image to start at
background-position: 50% 50%

Is there a way i can change that somewhere?

  • General Question
  • UIkit
  • Luna

8 Answers

0

Avatar thomas.p Support answered

i have no clue if this is the right file, and what i need to change there.

This should be the right file and the right part of the code. In the minified version change this part

case"bg":n["background-position"]="50% "+i+"px";break;

to

case"bg":i-=200;n["background-position"]="50% "+i+"px";break; 

Note the number 200 being the number of pixels the picture is being moved at the beginning.

Just for documentation: for the unminified version you would change

                // bg image  
                case 'bg':

                    // don't move if image height is too small  
                    // if ($this.element.data('bgsize') && ($this.element.data('bgsize').h + val - window.innerHeight) < 0) {  
                    //     break;  
                    // }  

                    css['background-position'] = '50% '+val+'px';  
                    break;  
                case 'bgp':  
                    css['background-position'] = '50% '+val+'%';  
                    break;

to

                // bg image  
                case 'bg':

                    // don't move if image height is too small  
                    // if ($this.element.data('bgsize') && ($this.element.data('bgsize').h + val - window.innerHeight) < 0) {  
                    //     break;  
                    // }  
                    val -= 200; // set the number of pixels here  
                    css['background-position'] = '50% '+val+'px';  
                    break;  
                case 'bgp':  
                    css['background-position'] = '50% '+val+'%';  
                    break;

Note that this change is not update-safe.

1

Avatar messagedj answered

Hey Thomas,

Thanks for the answer, Cutting off the image is not an option. you can check the link i sent, the header image that is loaded into the parallax is used in several places. The header only shows 1/3 of the full image

Start and stop only affects the parallax-effect not the position start of the background image.

/templates/yoo_luna/warp/vendor/uikit/js/components/parallax.js says:
"background-position"]="50% "+i+"px"

i have no clue if this is the right file, and what i need to change there.

1

Avatar messagedj answered

Hey Thomas,

With some minor modifications i finally came to the perfect result. in your code you use the bg, i changed that t bgp, so we can use percentages and not pixels. this makes it a bit more flexible with different sizes of images. finally came with:

change in
/administrator/components/com_widgetkit/vendor/assets/uikit/js/components/parallax.min.js :

case"bgp":n["background-position"]="50% "+i+"px";break;  

to

case"bgp":i-=-50;n["background-position"]="50% "+i+"%";break;  

the code i use in my module is :

<div data-uk-parallax="{bgp: '50'}" style="height: 420px; background-image: url(http://yourimage.url);"></div>  

at last i CHMOD parallax.min.js to 444 so it not overwrites with updates

Edited

0

Avatar thomas.p Support answered

Hi messagedj,

you already tried using the Start and stop values of UIkit parallax, didn't you?

If that doesn't do it, I think there's no other option in Uikit for that. This means, you would need to customize the JavaScript.

I think, I would simply cut off 50% of the image with an image editor. Would that be an option for you?

Kind regards
Thomas

Edited

0

Avatar messagedj answered

WOW Thomas,

i really appreciate the work you have put in my problem..

I don't know what i am doing wrong... but it doesn't seem to work... in fact nothing really happens.... i have tried changing the code, refreshing pages, cleaned browser cache, cleaned server cache.

After i have all that, i also found out that even if i renamed parallax.js to parallax.js_ the effect keeps on working. So this is not the javascript file that is being used for displaying the parallax effect...

poeh poeh poeh... Could you please kick me in the right direction ?

0

Avatar messagedj answered

ah, can it be a conflict with widgetkit?

0

Avatar thomas.p Support answered

If you use Widgetkit, it also has UIkit files at

\administrator\components\com_widgetkit\vendor\assets\uikit\js\components

and

\administrator\components\com_widgetkit\vendor\assets\wkuikit\js\components (for yootheme pro compatibility mode)

Try to delete or rename the parallax.js and paralla.mis.js files you find to find out which one is the correct.

I didn't test with custom code but with the widgetkit demo, so I had to edit the first file, but I thought as you had custom code you might need to edit the uikit file that comes with the theme.

0

Avatar thomas.p Support answered

With some minor modifications i finally came to the perfect result.

Nice, thanks for sharing your solution!


If a response answered your question and helped you solve your issue or at least pointed you in the right direction:

Your part now would be to help us to improve this support system:
Use the √ checkmark to the left of the answer that helped you and click it ONCE, please, to "accept" it.

Image

This will highlight it green and make a solution easier to spot for others. Something you might yourself benefit from with other issues you might have.

Mind that "voting" by using the + is different from accepting a response as an answer.

Know someone who can answer? Share a link to this question via email or twitter.