Hi, I’ve applied a parallax effect to a background image following these videos:
https://www.youtube.com/watch?v=iEI6GYkFIjg&feature=youtu.be (and ppart 2).
The problem is I want to set the backgound image ina dynamic way taking it from a database.
Can someone help me?
I haven’t done this yet, but if you add an image, then go to Dynamic Attributes and select image source, it gives you options to add a dynamic image source:
I would imagine that you should be able to create a server connect action file/query in app connect and retrieve the source from there
Hi, yes.
The problem is to use data in background property
You could use the Swiper component as in
You can use the image parallax effect without the use of background image.
Add a flexbox container and give it a parralax-container class.
Then add an image inside of the container and you can set the Image src as a dynamic attribute value your database.
Then tick Image Parallax under Dynamic Attributes of the image.
Finally you need to apply some CSS:
.parallax-container {
height: 340px;
position: relative;
}
.parallax-container img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}
You can alter the css for your needs.
Hi,
I’ve tied your code but the result is not what I expect.
https://www.campaniaturismo.org/test_room/dynamic_parallax.php
This is what I want but I want to set the image dybamically
This is what I have which works. There is also a text overlay class too.
<section>
<div class="d-flex parallax-container">
<img dmx-bind:src="...path.jpg" dmx-image-parallax="">
<h1 class="overlay-text text-light">Title Text</h1>
</div>
</section>
I also spotted a mistake on the spelling in your CSS file. It should be parallax rather than parralax
Hi Ben.
I’ve tried as you suggested me.
This is the result:
https://www.campaniaturismo.org/test_room/dynamic_parallax_2.php
There are two problems.
I want to move the title lower.
The second most important problem is Always the same.
I want to set the image dynamically.
I want to to something looking like this:
https://www.campaniaturismo.org/statico/home.html
(don’t care about the menu)
Thank you.
I’ve fixed the error about parralax but the page doesn’t run as I want:
https://www.campaniaturismo.org/test_room/dynamic_parallax.php
I want something like this:
https://www.campaniaturismo.org/statico/home.html
but I want to set dynamically the image.
At the moment this is my css code:
section.parallax {
color: #fff;
height: 425px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: auto;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
section#header_admin {
background-image: url(http://placeimg.com/900/700/nature?t=1572890809080);
}
If I use awiper the problem doesn’t change as the css is as follow:
.style1 {
background-image: url(“http://placeimg.com/900/700/nature?t=1572890809080”);
}
So the question is:
is it possible to set the background-image property dynamically?
If not how is it possible to achieve the same result?
There is a dynamic attribute called style, which can be used for this - apply it on your container directly.
It will produce code like:
dmx-style:background-image="'url(/path/to/images/' + dynamic_value + ')'"
5 Likes
Happy Bday Teo!
1 Like
Thank you Teodor.
This is the right answer!!