- This topic has 8 replies, 2 voices, and was last updated 9 years, 5 months ago by
.
-
Posts
-
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,
CelsoHi 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 arefit_always,fit_portraitandfit_landscape.Regards
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 arefit_always,fit_portraitandfit_landscape.Regards
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,
CelsoHola
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,
CelsoHola 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
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
- You must be logged in to reply to this topic.