Hello,
I’m now using the Jumbotron stack to provide the background image for my site which operates Mega Menu navigation.
I’m happy with how the site works on desktop, but would love to have a solution to the background image when scaled for mobile.
For desktop, the image is locked which is perfect for me.
On mobile devices I am aware that image lock is not supported.
Do I have the option to add a stack which would generate a background image for the mobile version instead? Would Backdrop or Banner work for this? I’m happy if the mobile version only had the the image at the top above all my content (like a banner)
If either would work, I’d love to know where I should be putting this stack in RW please as I’m utterly confused now?
It looks like you’re wanting a different site background for different breakpoints. That is not a feature that Foundry provides for the site background setting.
Hi Adam,
Thanks for the reply.
Could I achieve this by inserting a banner image or backdrop stack designed only for the mobile breakpoint which is disabled for desktop? Or is that going to mess too much with the jumbotron background?
I’d like to avoid having (what looks like) a plain background once the image is rendered on mobile devices.
Is there a possible work-around?
In my opinion I’d forego adding an image to the entire site background but instead use sections with backgrounds applied through Backdrop. This is just my personal preference though. An example would be the Alloy site.
I had tried out the backdrop stack before switching to Jumbotron in the hope it would improve the background image. And it definitely has for the desktop. Does the Foundry backdrop setting override Jumbotron then? Currently I have the Foundry background set to default, and the image is in Jumbotron only.
As I am not looking at designing websites for other people, just doing it for me, I’d really love to maximise the value of the add ons and stacks I have already purchased to work with Rapid Weaver if possible, before I purchase another add on.
The potion pack seems to provide what I am after for the site, but scanning the Alloy documentation, it seems this more suitable for those wanting to Blog? Have I got that wrong?
I’m happy with the the content I’m playing with generally, so just need to get it within a structure that works.
My ideal would be
1 page scrolling site, anchors to provide quick access to sections.
I can live with the possibility that I might just have to use a banner image only, and then have no image behind the sections (just a cool our or similar), but the ideal would be for the desktop to have a locked background image as it does, and for the mobile version to at least have the image as a banner for the landing/home page.
Be careful here on how you “disable” images. If all you do is “hide them” they still have to load, slowing down your pages and sucking up the users data plan for something they can’t see.
If you heavy items(large size) like images it’s best not to load them, not just hide them.
@habitualshaker has a stack that will only load an image for the specific screen sizes.
@joeworkman has agents I think that has a similar function.
I’m not suggesting you buy Alloy — I was suggesting you look at the Alloy site for how the Alloy site is designed, using areas of content with their own backgrounds (using Backdrop). This is a better approach than using a single site background image. Re-read my previous post and I think you’ll see what I mean.
Sorry for my confusion Adam! I do like the way the site you sent the link for flows.
So that is using a different image for each of the sections created through Backdrop, yes? And I wouldn’t need to worry about the Backdrops not behaving from Desktop to Mobile?
If I go ahead, can I just clarify that I would:
Need a backdrop stack for each section?
I’d remove the Jumbotron stack as it is redundant
The Backdrop stack would be dropped inside each Anchor section (In order for it to maintain the MegaMenu functionality), then my content stacks on top of that? (Eg. Container/Margins/Columns, etc?)
Brilliant, thank you so much. I’d rather be pedantic and ask the questions/clarify, rather than plow on in and get frustrated by it not functioning. (Even though my many mistakes also help me learn a lot! )
Incidentally, in terms of max image size and resolution, should I be working to something like 1920 x1080 pixels max? Or would this be too large for these sections? I was keeping the background image to approx 1mb, but trying to ensure my gallery images were no bigger than 500kb, most averaging 300kb.
This is something you have to decide on. What is a good trade off for you between file size and compression artifacts… also do t forget to use image compression tools like TinyPNG.
You can have 2 Foundry stacks (Control Center) on a page. One thats visible on moblie and one thats visible on tablet/desktop. Just mark in Responsive (se attached), when button is black you make stack unvisible on taht screentype
)
