Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 2, 2014 at 10:34 am #273161
    pako69

    Hello
    I noticed that parallax image are left aligned, here your CSS for the class “av-parallax avia-full-stretch”

    background-attachment: scroll;
height: 868.5px;
background-position: 0px 326px;

    It’s an issue for me because my image contain some important informations to be read, and there are in the middle of the image…

    I tried with:
    .av-parallax.avia-full-stretch {background-position: 50% top !important;}
    or
    .av-parallax.avia-full-stretch {background-position: center top !important;}
    but it not wot work: the image do not have any parallax effect…

    thanks

    June 2, 2014 at 12:51 pm #273213
    Ismael

    Hi pako69!

    Thank you for using the theme.

    Do you mind if we take a look at the actual website? Please try this on Quick CSS or custom.css:

    .av-parallax.avia-full-stretch {background-size: 100% 100%;}

    Cheers!
    Ismael

    June 2, 2014 at 1:12 pm #273224
    pako69
    This reply has been marked as private.
    June 3, 2014 at 2:08 am #273669
    Devin

    Hi!

    The background effects/positioning is going to have some small differences depending on the users browser and how the page is set up. Looking at it now the image is not noticably skewed but its using the css3 background-size: cover which you can read about here: http://css-tricks.com/perfect-full-page-background-image/

    The effect is that its using the browser spec to fill the container with the image.

    Cheers!
    Devin

    June 3, 2014 at 6:55 am #273744
    pako69

    Hello

    I know very well this page:http://css-tricks.com/perfect-full-page-background-image/ :-) but it’s only talking about fullscreen images
    with ‘background-size’ set to ‘cover’ BUT with ‘background-position’ to ‘center center’ AND ‘background-attachment’ to ‘fixed’
    So there is no similitude with Enfold except ‘background-size’ because your images are not only fullscreen, they have a parallax effect.

    However, I modestly think there is better way to use fullscreen backround image with parallax effect, I have setup a test page: http://pascal-bourhis.net/parallax/
    As you can see, the left and right edges of my images (red triangles) are all visibles, there is a parallax effect (which can be set to higher or lower) and there is some centered texts.
    This demo is based on http://www.minimit.com/articles/lets-animate/parallax-backgrounds-with-centered-content

    I think Kriesi should have a look to this and maybe reconsider the way he has done his fullscreen imaged with parallax effect…

    thanks

    EDIT: I think there is a confusion with parallax images. In my opinion a parallax image it not necessarily a fullscreen image, it’s an image wich can have many layers that can scroll (horizontally or vertically) with different speeds, ie: http://www.bbc.com/news/entertainment-arts-20026367

    June 3, 2014 at 4:07 pm #273946
    Devin

    The current implementation isn’t going to be changed any time soon. Its set up in a way that it works across browsers, loads with the ALB and degrades effectively.

    You can use the Code element to add in your own custom code or you can customize a color section background however you want.

    June 4, 2014 at 8:50 am #274414
    pako69

    Hello Devin
    – What is “ALB”?
    – you can customize a color section background however you want
    Can you give a begining of what I am supposed to do something like that.

    June 4, 2014 at 1:20 pm #274474
    Yigit

    Hi!

    ALB = Advanced Layout Builder
    Please edit your page and add Color Section element to your page under Layout Elements and then click on Color Section element to customize it.
    Please see – http://vimeo.com/channels/aviathemes/64927359 and http://vimeo.com/channels/aviathemes/86284134

    Cheers!
    Yigit

    June 5, 2014 at 7:53 am #274974
    pako69

    Hello Yigit
    I know this video but it’s only the basics of Enfold…
    And Devin said: “the current implementation isn’t going to be changed any time soon”
    Too bad /-)
    Just look at this WordPress theme: http://themetrust.com/demos/port/ and you will see that en parallax image are center/center…

    June 5, 2014 at 8:41 am #274991
    pako69

    I search and found in /js/shorcode.js line 1750, this:
    prop["background-position"] = "0px "+ scrollPos +"px";
    > This is the reason why the background image is left aligned

    Replace it with:
    prop["background-position"] = "center "+ scrollPos +"px";
    and you’ve got a centered horizontally background image wich keep the parallax image.

    So what… ? It will be very cool if we could choose how the horizontal background parallax image is aligned… because I really hate to modify Enfold core files…

    June 7, 2014 at 2:14 am #275970
    Josue

    Feel free to request it here.

    Best regards, 
    Josue

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Why the parallax image are left aligned?’ is closed to new replies.