Home Forums Weaver Xtreme Theme header image

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #61864

    On this https://www.cosmostylingmarin.com/ the header image does not size correct on iPhone or tablets? What I mean it does not get smaller on iPhone or tablets the image stays large? John


    We went through that (meaning how parallax images work) a number of times.

    A parallax image is meant to cover the whole browser area so that no matter where the window that reveals part of it is, it will show some of that image.

    This means that when the aspect ratio of a parallax image is not the same as the browser, the image will cut off either at the top and bottom, or on the left and right.

    As an example, if your parallax image has a landscape ratio (large width, small height) and you ask it to cover a browser that has a portrait ratio like a phone held vertically (large height, small width), then the image will scale so that the height of both is the same, and that will result in most of the sides being cutoff.

    One way to better control what part of the image shows up, is to set different images for portrait and landscape. The guide article below explains how to do that

    Optimizing Parallax images for portrait and landscape

    Another way is to play with the background image position and size parameters to try and optimized base on a specific situation

    For example in the case of the area being located at the top, you don’t actually care that the image covers the whole height.

    The rules below would change the default, to position the image 200px from the top, and only display at 100%

    .parallax-base.mypar1 {background-position:center 200px;background-size:100%;}

    Side effect, when the browser become very narrow, the image will not cover the whole vertical space of the area.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.