Like on this page: https://www.projectseven.com/products/templates/pagepacks/zeitgeist/01.htm
It is kind of a Wix, WordPress thing!
Thanks,
-paulw406
How can I do scrolling background images
(11 posts) (2 voices)-
paulw406
offlineMemberPosted 2 years ago -
Sinclair
offlineMemberPaul,
If you have zeitgeist then you have all you need, the zeitgeist CSS is well commented and should keep you right.
HTH
Posted 2 years ago -
paulw406
offlineMemberOkay Sinclair. I was curious how to do it from scratch. I have Background Scroll Effects but I struggled with it and could not reproduce the effects of the samples that are on the pages.
I seem to remember you pointing me to the Harmony tutorials.
Thanks again,
-paul
Posted 2 years ago -
Sinclair
offlineMemberPaul,
The page you posted is pure CSS and html, you can do similar just using, say, HMY, as your html framework, no need to use one of the pagepacks such as zeit or scripting such as BSE, it does require a certain amount of crafting your own CSS, nothing too much though.
HTH
Posted 2 years ago -
paulw406
offlineMember>>it does require a certain amount of crafting your own CSS, nothing too much though.<<
That might be over my head Sinclair!!
I will look at the Harmony tutorials again.
All the site builders seem to do the background scrolling almost like a default option.
Thank you so much,
-paulw406
Posted 2 years ago -
Sinclair
offlineMemberYou can figure things out via the CSS pretty easily (honest), you can then cherry pick the rules you need and copy, the section/s, you have zeitgeist I think, right?
You can 'Inspect' grid (p7HMY_2), (make as if going to modify it and check out the Content User Classes applied to the second column.
Then look at the zeitgeist CSS for these....
.hmy-content-wrapper.intro {
min-height: 100vh;
border-bottom: 1px solid;
}.banner-01 {
background-image: url(img/peeking-out.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}and....
.banner-01 {
background-image: url(img/peeking-out.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}....they'll be worth a look.
HTH
Posted 2 years ago -
Sinclair
offlineMemberand....
.banner-01 {
background-image: url(img/peeking-out.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}Should read.....
and....
.hmy-content-wrapper.intro .hmy-content {
max-width: 1000px;
margin: auto;
}Sorry 'bout that....
Posted 2 years ago -
paulw406
offlineMemberI don't know what you mean about that Sinclair!! I guess my brain is not working again today!
Which Zeitgeist layout should I be looking at?
There isn't a .banner in the couple I have looked at, but there is a .hmy-content-wrapper.intro in the p7Zeitgeist-01.css
What would I change to have scrolling background images?
Thank you!!
-paulw406
*------
Should read.....and....
.hmy-content-wrapper.intro .hmy-content {
max-width: 1000px;
margin: auto;
}Posted 1 year ago -
Sinclair
offlineMemberSorry, my fault, so this is the page you posted, the 01 or Portal page, you would look at all the rules I posted plus the .top-panel rule and look at the HMY via it's UI and all should be revealed.
From the p7Zeitgeist-01 stylesheet.......
/*
---------------------------------------------------------------
Special fixed background images. The first class "top-panel"
sets the smoky wisp background in the first content box in
layout-01. The second class "banner-01" is for the large,
full-width image of the woman in the hat in layouts 01-03.
---------------------------------------------------------------
*/
.top-panel {
background-image: url(img/smoke.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}.banner-01 {
background-image: url(img/peeking-out.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}HTH
Posted 1 year ago -
paulw406
offlineMemberThanks Sinclair.
I created a new Typecrafters page from a template and added the code to my CSS file. Images are there for both Harmony columns. I just need to figure out how to make the image fill up the columns since there isn't enough text to do so (like in the Portal Zeitgeist page). I think I saw that code somewhere in Zeitgeist.
-paulw406
Posted 1 year ago -
paulw406
offlineMemberI followed your advice Sinclair and it works great! I forgot to add the hmy-content-wrapper.intro code and also forgot to add the intro into the Content User Class for the two colums (intro top-panel)!
I did this in a page created by my TypeCrafters template and it works great!!
Cool - now, just like you said, I can do this anywhere now.
Thank you so much!!
-paul
Sorry, my fault, so this is the page you posted, the 01 or Portal page, you would look at all the rules I posted plus the .top-panel rule and look at the HMY via it's UI and all should be revealed.
From the p7Zeitgeist-01 stylesheet.......
/*<br />
---------------------------------------------------------------<br />
Special fixed background images. The first class "top-panel"<br />
sets the smoky wisp background in the first content box in<br />
layout-01. The second class "banner-01" is for the large,<br />
full-width image of the woman in the hat in layouts 01-03.<br />
---------------------------------------------------------------<br />
*/<br />
.top-panel {<br />
background-image: url(img/smoke.jpg);<br />
background-repeat: no-repeat;<br />
background-position: left top;<br />
background-attachment: fixed;<br />
}
.banner-01 {<br />
background-image: url(img/peeking-out.jpg);<br />
background-repeat: no-repeat;<br />
background-position: center;<br />
background-attachment: fixed;<br />
background-size: cover;<br />
}
HTHPosted 1 year ago
Reply
You must log in to post.