Background image scrolling issue
Permalink Browser Info Environment
Hi, I'm having trouble with the scrolling behavior on the full page background of the template. It is showing the background image on repeat when you scroll down. I am using Firefox, but the Express demo site works fine in the same browser. I've tried making the header size smaller in the css, but that doesn't work, something to do with the way the scrolling works. You can take a look at it here:http://www.perceptivecreative.net/2016/...
Also, the background image starts out right aligned, and then jumps to the middle once you start scrolling. It is disconcerting. I haven't done anything to the theme other than install, then upload a background image and add some text.
Coming back to this template after deciding not to use it last year because of these problems. But, I thought I would give support a try.
Also, the background image starts out right aligned, and then jumps to the middle once you start scrolling. It is disconcerting. I haven't done anything to the theme other than install, then upload a background image and add some text.
Coming back to this template after deciding not to use it last year because of these problems. But, I thought I would give support a try.
| Type: | Pre-Sale |
|---|---|
| Status: | In Progress |
Ok, the link is working now. I have no idea why it wasn't working before! Probably a problem with my host or something.
www.www.perceptivecreative.net/2016...
www.www.perceptivecreative.net/2016...
Oh, the background image is the size recommended in your help files. 2600x900. I haven't installed any add-ons. this is a fresh C5 install.
Thanks for those details. To go through the points raised:
1) Regarding the "jumping" of the background image, I can replicate. I haven't seen that behaviour before. But a quick fix is looking in the main.css file of the theme and add after this line to force the background position to be the same on the initial page load as when the parallax effect is working:
2) For the background repeat, use the same section of CSS code (within #header_container) and add in:
Let me know how you go with that.
JB
1) Regarding the "jumping" of the background image, I can replicate. I haven't seen that behaviour before. But a quick fix is looking in the main.css file of the theme and add after this line to force the background position to be the same on the initial page load as when the parallax effect is working:
#header_container{ background-position:center 0px;
2) For the background repeat, use the same section of CSS code (within #header_container) and add in:
background-repeat:no-repeat;
Let me know how you go with that.
JB
Ok, the background isn't jumping anymore, thanks for that. However, the image ends before the text disappears (it is only by a few pixels, but noticeable if you look closely as the scrolling behavior happens). So there's something else going on. Is there a way to make the text disappear faster?
Also, on the demo site it looks like the white main content area is coming up over the image, but you don't get the same effect on my site. So there's something wrong :(
Apologies for the delay, I've been travelling the last few days with limited wifi access.
It looks like your background image is 371px high (http://www.perceptivecreative.net/2016/files/4214/7113/8590/homepage_artwork.jpg)
The demo on mysite (http://themes.c5extras.com/packages/jb_express/themes/jb_express/images/express_bg.jpg) is 466px. So I'd suggest doing that. Also your image is much wider - try the same width as my demo (700px) and then I'd suggest if you want something higher resolution not to go past 1000px wide.
Let me know how that goes.
JB
It looks like your background image is 371px high (http://www.perceptivecreative.net/2016/files/4214/7113/8590/homepage_artwork.jpg)
The demo on mysite (http://themes.c5extras.com/packages/jb_express/themes/jb_express/images/express_bg.jpg) is 466px. So I'd suggest doing that. Also your image is much wider - try the same width as my demo (700px) and then I'd suggest if you want something higher resolution not to go past 1000px wide.
Let me know how that goes.
JB
I fixed it.
#header_container {
height: 900px;
/* customize_header_background_color */ background-color:#ffffff; /* customize_header_background_color */
overflow: hidden;
background-size: cover;
background-position:center 0px;
background-repeat:no-repeat;
background-attachment: fixed;
I added background-attachment:fixed; to the #header_container id. It was there for the white template, but not for the others. I didn't know that the white template would show a background image, but I tested it and it does. So, cheers, everything works!
Hope this helps someone else down the road. Thanks for your support! I'll try it with larger images now that I know that was the issue.
#header_container {
height: 900px;
/* customize_header_background_color */ background-color:#ffffff; /* customize_header_background_color */
overflow: hidden;
background-size: cover;
background-position:center 0px;
background-repeat:no-repeat;
background-attachment: fixed;
I added background-attachment:fixed; to the #header_container id. It was there for the white template, but not for the others. I didn't know that the white template would show a background image, but I tested it and it does. So, cheers, everything works!
Hope this helps someone else down the road. Thanks for your support! I'll try it with larger images now that I know that was the issue.
Ah, so glad you got it. That makes sense.
Thanks for sharing the code snippet.
Have a great weekend.
JB
Thanks for sharing the code snippet.
Have a great weekend.
JB
I checked that URL provided and it comes up with a 404 error. Has that address changed?
It's possible the background image you're using is too small or another add-on on the page could be interfering with it. Once you can provide a public URL I can see and replicate the issue I'll be able to help you get to the bottom of it.
JB