Scrolling Mobile Background Image

Support › Forums › Cian – HTML Template › Scrolling Mobile Background Image

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 16, 2014 at 5:40 pm #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

    November 17, 2014 at 7:49 am #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

    November 17, 2014 at 7:49 am #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

    November 19, 2014 at 6:54 pm #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

    November 21, 2014 at 1:14 am #4107
    Celso
    Participant

    Hola

    ¿Ha podido echarle un vistazo a este problema?

    Mucha gracias,
    Celso

    November 21, 2014 at 1:27 am #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

    November 21, 2014 at 1:14 pm #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

    November 21, 2014 at 9:09 pm #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

    November 23, 2014 at 8:50 am #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

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