Parallex Homepage backgrounds not responsive

[cjlyons]

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!
CJ
PS: I am not a developer or designer, so any answers, could you keep it as simple as possible, please...

http://cjlyons.net

[David Chu]

Hi,
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

[cjlyons]

Thanks, 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!
CJ

[David Chu]

Thanks, 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

[cjlyons]

You're so sweet to say that, thanks!

Off to play with that section of the CSS, fingers crossed!

Thanks again,
CJ

[David Chu]

Glad to help! Your writing sounds fascinating.

Cheers, D

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[cjlyons]

Thanks! It's definitely a fun adventure, lol!
CJ

[Author]

Posts