Hello, I’d like to add the same background image and parallax motion to my blog index page that I have for my individual blog posts. Before updating X I’d managed to do this, but it disappeared and I’m not sure what I originally had done.
Hi Jeremy,
There is no option in our theme to have a background image with parallax feature for the blog listing page. This is a customization request which is outside of our support scope.
The only thing we can suggest is that you can add the code below to X > Theme Options > CSS which will give you something similar but the Parallax feature will be fixed and not dynamic:
body.blog .offset {
background: url("URL OF THE IMAGE") fixed;
}
Change the
URL OF THE IMAGEwith the URL of the image you want to use as a background.
Thank you.
Thanks @christopher.amirian I’ve been trying this numerous ways on the staging site and it doesn’t seem to be working.
Hi There,
Is it your website?
I couldn’t find your custom CSS. Did you remove it? Can you please try with this custom CSS instead?
body.blog .main {
background: url("/wp-content/uploads/2018/05/Bachelorette-Gifts.jpg") fixed;
}
Let us know how it goes!
Hello @thai yes I removed it. I just tried this one as well, to no avail. Even with the !important rule didn’t work. The image I’d like to use is /wp-content/uploads/2018/05/Bachelorette-Gifts.jpg repeated at .1 opacity.
Hi There,
Could you please share us with your admin account so we can take a closer look?
Thank you.
Hi There,
I couldn’t find this image on your staging website: /wp-content/uploads/2018/05/Bachelorette-Gifts.jpg.
But I’ve changed the custom CSS to this and it’s working. Can you confirm?
body.blog .main {
background: url("http://rb1.56d.myftpupload.com/wp-content/uploads/2018/05/Fon97-basic-unit-background-repeat-225x225px.jpg") fixed;
}
Thank you.
Thank you @thai yes, you are correct that’s the image. Would you happen to know the selectors to adjust the opacity of just the image? Before updating X I had also managed to get parallax motion on the blog index page with this particular image in addition to adjusting the opacity.
Hi again,
Please replace the previous code with the following code:
body.blog .main:before {
background: url(http://rb1.56d.myftpupload.com/wp-content/uploads/2018/05/Fon97-basic-unit-background-repeat-225x225px.jpg) fixed !important;
opacity: 0.3;
top: 0 !important;
left: 0 !important;
bottom: 0;
right: 0;
position: absolute;
z-index: 0 !important;
content: "";
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Cheers!
Thanks @Nabeel these resources are a nice refresher as well as informative. Your code here seems to work on desktop but on mobile devices the background image is scrolling with the rest of the content. I’m also wondering, is there a way to declare parallax rules here in CSS?
Hi @jeremy4,
Parallax is defined and controlled by javascript, CSS is not enough. And please check this https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios (fixed !important;) why it’s not working on mobile. And Parallax are intentionally disabled for mobiles since it’s glitchy, some features may not work.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.