Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallex Homepage backgrounds not responsive
Tagged: parallex, responsive images
- This topic has 6 replies, 2 voices, and was last updated 10 years, 2 months ago by cjlyons.
-
AuthorPosts
-
February 25, 2014 at 4:53 pm #92357cjlyonsMember
Hi guys! I'm loving the new Parallex theme but I can't get my homepage area backgrounds to be responsive for smaller devices. I looked at the sites in the showcase and most of them have the same issue--the background doesn't shrink with the size of the screen, messing up the lovely parallex effect.
Any suggestions? here's my site: http://cjlyons.net
Thanks!
http://cjlyons.net
CJ
PS: I am not a developer or designer, so any answers, could you keep it as simple as possible, please...February 26, 2014 at 12:24 pm #92499David ChuParticipantHi,
Resizing full-width images for every device is a coding quagmire. The Stretch theme uses Backstretch, which does a pretty decent job of that, but even Backstretch will sometimes choke at times when someone is using a small device and suddenly changes from portrait to landscape, for instance.If someone were to set up Backstretch on your site, you'd get some of what you want, but would lose the parallax effect. In the themes I'm seeing using parallax, Genesis or not, the coders are using some nice hipster CSS3 commands to get that, and then at smaller sizes they sort of jettison that and go to a regular static background, and that's what you're seeing on your site.
So sorry that this is probably not a satisfying answer. I'd still say that your site looks great at small sizes. I don't think your visitors will be upset at all at not having this mild parallax effect, and may not care at all. What's very important is how well your site works at small sizes already!
Cheers, Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
February 26, 2014 at 1:02 pm #92510cjlyonsMemberThanks, Dave! I was hoping there was some simple CSS that a cyber-klutz like myself could manage--if only for the last two media calls. I'm fine with the jettisoning you mentioned and going to a static bg at the smaller sizes--could you walk me through that?
That way on small screens, even if the parallex effect is lost, at least users will see the entire bg image.
(All the other elements re-size nicely, even the Nivo slider, so I'm not sure why it would be so difficult to get this one background image to also re-size, but I'm not a designer or coder, just someone stubborn enough to keep hammering away until the site looks the way I want it to, lol!)
Thanks again for any suggestions!
CJFebruary 26, 2014 at 1:31 pm #92517David ChuParticipantThanks, Dave! I was hoping there was some simple CSS that a cyber-klutz like myself could manage–if only for the last two media calls. I’m fine with the jettisoning you mentioned and going to a static bg at the smaller sizes–could you walk me through that?
Glad to have helped, but that's just it, that's pretty much what it's already doing. 🙂 btw, you're obviously WAY ahead of many users, if you weren't so busy writing, you could get a job at this stuff. So I'd actually recommend doing nothing, although I will admit, I am very dogged as well when tracing CSS stuff.
If you want to play, go down to Media queries in your style.css, you'll see that at the 1139 width level:
.home-section-1, .home-section-3, .home-section-5 { background-attachment: scroll; background-position: top; -webkit-background-size: auto; -moz-background-size: auto; background-size: auto; }
This essentially shuts off some background-related commands happening above that. I experimented with commenting all these commands out, and you could play with that. After doing that, I can see why they used those - it becomes hard to read your content at small sizes, although it kinda keeps the parallax going.
Good luck!
Cheers, Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
February 26, 2014 at 1:36 pm #92518cjlyonsMemberYou're so sweet to say that, thanks!
Off to play with that section of the CSS, fingers crossed!
Thanks again,
CJFebruary 27, 2014 at 12:04 pm #92692David ChuParticipantGlad to help! Your writing sounds fascinating.
Cheers, D
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
February 27, 2014 at 2:10 pm #92722cjlyonsMemberThanks! It's definitely a fun adventure, lol!
CJ -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.