Home Forums Weaver Xtreme Theme parallax: image quality

Topic Resolution: Resolved

This topic contains 5 replies, has 2 voices, and was last updated by  kiwimef 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #54623

    kiwimef
    Participant

    hi weaver support,

    you helped me solve the image quality problem with FI in the main options FI tab. that worked perfectly.

    i tried to do the same for the background image for my parallax posts, but can’t seem to find any. i followed your instructions for the parallax image and tried everything from 2000px to 900px width for a full width image, but whenever i look at the page where the posts get displayed the image seems a lot worse to me than the actual one. and, for the watercolour image (quality not being the point here, it’s poor to start with), it does not display the full width of the image, something on the right hand side is always missing. (the skytower should be visible).

    and one last question::

    how can i get rid of that white margin at the top of this page only or, alternatively, make it smaller and display a very small or expandable menu in the top right corner.

    http://family.3kiwis.co.nz/?page_id=2806

    thanks again,

    thanks again,

    #54625

    scrambler
    Moderator

    On the page you gave us, the image

    //family.3kiwis.co.nz/wp-content/uploads/2018/05/welcome2.jpg

    Looks fine to me and full res, so not sure what you are seeing. Have you checked different browser and browser sizes, to see if it is linked to a specific configuration?

    If you are speaking of another page, please provide a link.

    For the section with the water color image, your parallax block is shifted right, and I am not sure why. Have you entered any custom CSS anywhere, if so what and where?

     

    #54626

    scrambler
    Moderator

    For the white space at the top, a few things.

    You have a 10px top margin set on the wrapper, remove that.

    You have a 10px Top Padding on the wrapper, set that to zero

    You have a 30px top margin set on the container, remove that

    There is a 4px top padding on #content, set that to zero

    You have an empty info bar, hide the info bar in main options > Menus > Info bar > Hide option

    #54629

    kiwimef
    Participant

    hi scrambler,

    thank you for your reply.

    re the shilfted parallax:

    there is no additional CSS in that post, it’s exactly like the other one on that page.

    re the white space at top:

    if i do what you suggest to remove that white space, wouldn’t that affect all posts and pages? or how can i do that only for the posts on this page or pnly for this page? (except for “hide info bar”, i can do that per page)

    and:

    when i resize the browser window (like you do to see if it is responsive) the image doesn’t gradually get smaller so that you would always see the whole image but the visible part keeps getting smaller until at a certain threshold point the whole image “jumps” into a smaller size. is that how it is supposed to work or is it possible to make the whole image “shrink” gradually?

    thanks again, always appreciate your help.

    maria

    #54630

    scrambler
    Moderator

    1) Space

    The empty info bar must be hidden as it causes dead space that should be nowhere, so hide it globally in

    Main options > Menus > Info bar > Hide option

    To remove the space only on that page, add the rules below in the theme Global Custom CSS Rule box

    .page-id-2806 #wrapper, .page-id-2806 #container , .page-id-2806 #content {margin-top:0;padding-top:0;}

    2) Water color image.

    The problem appears to be fixed, the image is now full width

    3) “when i resize the browser window (like you do to see if it is responsive) the image doesn’t gradually get smaller “

    If you shrink your browser proportionally same % on both vertical and horizontal, then the image does get smaller, but if you do that not proportionally, you will have cropping of the image either top/bottom, or left right.

    This is because of the nature of the parallax effect. In order to create a parallax effect, the background image is set to cover the whole browser area, even where the image does not show up, so that as you scroll it can be revealed. This means that if at any point, the Heigh/width ratio of the image is different than the one of the browser, then cropping will occur.

    #54633

    kiwimef
    Participant

    space is now perfect, exactly what i wanted!

    watercoloour image is magically fixed!

    resizing: i have tried that and now understand how that works.

    thanks for all your help!!!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.