Hi,
I'd like to know if i can make a page with several background image, as in this page for instance : https://www.bphoto.fr/biographie-dun-ph ... riage/#bio
Thx by advance
Bastien
X3Photo Gallery Forums
X3 Photo Gallery Support Forums
Background Image10 posts
Re: Background Image
the only thing i can do atm is : http://www.hajdukbastien.fr/Mariage/2019/
But it's not what i really want...
I used :
<style>
.parallax {
/* The image used */
background-image: url("http://www.hajdukbastien.fr/img/201852.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 800px;
}
</style>
<!-- Container element -->
<div class="parallax"></div>
Thx :)
But it's not what i really want...
I used :
<style>
.parallax {
/* The image used */
background-image: url("http://www.hajdukbastien.fr/img/201852.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 800px;
}
</style>
<!-- Container element -->
<div class="parallax"></div>
Thx :)
Re: Background Image
Hi Bastien. The image intro plugin in X3 is only for setting the top intro image. Although it works technically similar to "parallax" plugin, it's a different implementation ... The image intro is simply an image (not a background), while "parallax" is often used to set "background images" into the page content, where the background image scrolls upwards at a fraction of the scroll speed.
I see you have already implemented the basic idea. Good job :clap: I guess you wanted the background to be full browser width? And perhaps a fractional scroll on the background? Unfortunately, this would be a "plugin" I would have to create specifically, and not something I could explain in a forum post. Additionally, to get the background at full browser width, essentially you must set your context module to WIDE width, and then instead use a grid within to limit text width. As it is now, you have placed your parallax inside context section which is already limited by a width, and it can't expand to 100% as long as it's inside the context (unless context is set to 100%).
You could try to add some negative margin to your parallax css to make the image slightly wider:
I'll consider this as a plugin in the future, but I can't provide much more help for now
I see you have already implemented the basic idea. Good job :clap: I guess you wanted the background to be full browser width? And perhaps a fractional scroll on the background? Unfortunately, this would be a "plugin" I would have to create specifically, and not something I could explain in a forum post. Additionally, to get the background at full browser width, essentially you must set your context module to WIDE width, and then instead use a grid within to limit text width. As it is now, you have placed your parallax inside context section which is already limited by a width, and it can't expand to 100% as long as it's inside the context (unless context is set to 100%).
You could try to add some negative margin to your parallax css to make the image slightly wider:
Code
margin: 0 -3em;
Re: Background Image
This could be an interesting feature, thanks for considering it for future update!
Re: Background Image
Yes thanks :) I understood the different things about the full witdth yesterday evening searching arround.mjau-mjau wrote: Hi Bastien. The image intro plugin in X3 is only for setting the top intro image. Although it works technically similar to "parallax" plugin, it's a different implementation ... The image intro is simply an image (not a background), while "parallax" is often used to set "background images" into the page content, where the background image scrolls upwards at a fraction of the scroll speed.
I see you have already implemented the basic idea. Good job :clap: I guess you wanted the background to be full browser width? And perhaps a fractional scroll on the background? Unfortunately, this would be a "plugin" I would have to create specifically, and not something I could explain in a forum post. Additionally, to get the background at full browser width, essentially you must set your context module to WIDE width, and then instead use a grid within to limit text width. As it is now, you have placed your parallax inside context section which is already limited by a width, and it can't expand to 100% as long as it's inside the context (unless context is set to 100%).
You could try to add some negative margin to your parallax css to make the image slightly wider:
I'll consider this as a plugin in the future, but I can't provide much more help for nowCodemargin: 0 -3em;
I now know i can get full width, but i need to configure my whole pages with grids before :)
But i still don't get how i could have a paralax effect in my second image, as in my example !?
I found this : https://www.alsacreations.com/tuto/lire ... llaxe.html
But i need to understand lot's of things about CSS and i'm far from it right now :/
Yeah ! a plugin would be so great ;p lol
Edit : it seems it needs javascript for the effect i search for ? Can it be included by myself ? (if one day i understand how...)
Re: Background Image
With CSS you can only set it to FIXED (locked position). If you want the image to scroll a fraction of the scroll, this needs to be programmed with Javascript.Troudd wrote:But i still don't get how i could have a paralax effect in my second image, as in my example !?
Edit : it seems it needs javascript for the effect i search for ? Can it be included by myself ? (if one day i understand how...)
Re: Background Image
Ok thanks, you confirm what i thought.mjau-mjau wrote:With CSS you can only set it to FIXED (locked position). If you want the image to scroll a fraction of the scroll, this needs to be programmed with Javascript.Troudd wrote:But i still don't get how i could have a paralax effect in my second image, as in my example !?
Edit : it seems it needs javascript for the effect i search for ? Can it be included by myself ? (if one day i understand how...)
Can you plz just confirm i can add javascript in my page to have this effect ?
If yes i'll seach for a solution. If not i will.. not :p
Re: Background Image
Yes you can, although what you are trying to do won't be easy. You can add javascript at the bottom of the content, for example:Troudd wrote:Can you plz just confirm i can add javascript in my page to have this effect ?
If yes i'll seach for a solution. If not i will.. not :p
Code
<script>
var hehe = 'haha';
</script>Re: Background Image
Nice Site to learn parallax scrolling.
https://www.w3schools.com/howto/howto_css_parallax.asp
Regards
hardliner
https://www.w3schools.com/howto/howto_css_parallax.asp
Regards
hardliner
Re: Background Image
thx :)mjau-mjau wrote:Yes you can, although what you are trying to do won't be easy. You can add javascript at the bottom of the content, for example:Troudd wrote:Can you plz just confirm i can add javascript in my page to have this effect ?
If yes i'll seach for a solution. If not i will.. not :pCode<script> var hehe = 'haha'; </script>
Yes thx, it's what i used. But no javascript for "real" parallax on this one :)hardliner wrote: Nice Site to learn parallax scrolling.
https://www.w3schools.com/howto/howto_css_parallax.asp
Regards
hardliner