Scrolling Mobile Background Image

Scrolling Mobile Background Image

Support Forums Cian – HTML Template Scrolling Mobile Background Image

This topic contains 8 replies, has 2 voices, and was last updated by  CreaboxThemes 4 years, 1 month ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #4092

    Celso
    Participant

    Hi,

    I’m using the video version of the template. When in mobile the body background image does not stay static and scrolls with the content. This will show no background at the middle an end of the page. How can I make the image static so it covers the whole viewport?

    I have tried background-position: fixed; but what it does us stretch the image from the top of the page all the way to the bottom creating a distorted background image.

    You can view this on iOS Safari at: https://www.flooxa.com.

    Thanks,
    Celso

    #4093

    CreaboxThemes
    Keymaster

    Hi Celso,

    you can try to change the image slider options. In the file images.js (folder js), you can try to change the variables that affect the images. The variables are fit_always, fit_portrait and fit_landscape.

    Regards

    #4094

    CreaboxThemes
    Keymaster

    Hi Celso,

    you can try to change the image slider options. In the file images.js (folder js), you can try to change the variables that affect the images. The variables are fit_always, fit_portrait and fit_landscape.

    Regards

    #4102

    Celso
    Participant

    Hi,

    The problem is not on the images template, it’s on the video template and on the mobile / responsive settings. Please, take a look at my website on a mobile phone (iOS preferably) and do a scroll. You would notice that the <body> background image will scroll with the page and when you get to a section where you would see the background, you actually see a white background. I would like to <body> background image to stay put when you scroll on a mobile device.

    Thanks,
    Celso

    #4107

    Celso
    Participant

    Hola

    ¿Ha podido echarle un vistazo a este problema?

    Mucha gracias,
    Celso

    #4108

    Celso
    Participant

    Hola

    Estuve verificando su plantilla original y ocurre lo mismo. La imagen de fondo hace scroll con toda la página en la versión mobile de la plantilla index_video.html.

    Gracias,
    Celso

    #4113

    CreaboxThemes
    Keymaster

    Hola Celso,

    ya lo he mirado y tengo la solución. Tienes que modificar el archivo style.css, que está en la carpeta css. En el archivo modifica la clase .poster-image y añádele el siguiente atributo:

    background-attachment: fixed;

    Saludos

    #4115

    Celso
    Participant

    Hola

    Esa solución funciona, pero hace que la imagen se estire y se distorsione. Sin embrago, he encontrado una solución que pudiera incluir en su plantilla.

    En index.html

    <body>
    <div id=”bgimg”></div>

    </body>

    En style.css

    .poster-image {
    background: url(../images/bamboo-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    backface-visibility: hidden;
    background-position: center center;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    }

    en video.js cambiar “body” por “#bgimg” así:

    else{$(“body”).addClass(“poster-image”)}

    por

    else{$(“#bgimg”).addClass(“poster-image”)}

    Me ha funcionado muy bien y preserva la funcionalidad del vídeo en la versión Desktop. Espero que les ayude.

    Celso

    #4117

    CreaboxThemes
    Keymaster

    Hola Celso,

    tu solución es perfecta. Si no te importa me gustaría incluirla en el tema para que pueda ayudar a otros usuarios.

    Saludos

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

You must be logged in to reply to this topic.