I’m not necessarily asking how to do it but is it possible to tile a background image over the whole site and then create a container with a white background for the actual content - nav, header image, text - that sits ‘on top’ of the background.
Source base doesn’t offer an option to use an image as a background so I guess I’d have to use a Container Plus stack set to full with and then put everything else inside that?
Thanks
Rob
Hi - no Source doesn’t offer that in the base stack. You should be able to do it though just with the Stacks page settings I’d think?
@rob.beattie I’ve not tiled an image but have used the container plus stack in this way for my Source based redesign, not live yet still a work in progress.
https://betasite.slipwayautos.co.uk
Thanks Stuart but I’m struggling to make it fill the height of the browser window this way. @pmjd’s way looks like it’ll work and if I know it’s possible, I can experiment!
Rob
Yes - with a fixed background that approach should work. If it’s not fixed then the background image would potentially be stretching a lot if you are adding a lot of content to the container.
That’s looking great @pmjd - nice use of the grid :) Think you’ll probably need to move the nav/chroma out of the container though.
This is only the second time i’ve heard it mentioned but if there is a need for a proper background image then I could perhaps look to add it in.
I would second a BG images setting in Source Settings for page BG.
I have used it a few times and just CSS’d it with something like:
body { background-image: url("resources/bg1.jpg"); background-position: right center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover} }
Be careful though because on touch devices it will un-fix and then stretch to the height of the entire document. You should add a media query or JS to trap touch devices and revert to a colour only. The only other solution is a separate div that is 100% browser height and fixed position but this causes all sorts of other problems with other backgrounds going behind it unless their parent has an explicit z-index - remember all the problems with Clearing Gallery and Sections needing a z-index when a background image was used in Foundation - this was the root of all that.
What seems a simple thing can actually open up a world of hurt and incompatibility.
So true. I didn’t want to over complicate the approach here but yes it would need a media query when using fixed.
A fixed page BG is a pain in the arse and not worth the complications.
Thanks @habitualshaker, still very much a work in progress.
Trying to do a bit of a custom menu with LimeLight and add a search stack but the layering isn’t quite right, do have to have a play about thought to see if it’s something in the way I’m trying to lay it out.
A background option would be great, especially one that is cleaver enough to load up the right size of image in a way srcerer does 😉
Images on the body are always render blocking and now that Google is going to start shaming slow websites to visitors I would think very seriously about whether it is really necessary.
There are lots of places that images can add to the design without being on the body.
Yeah - if you pull the Nav / Chroma stacks out of that big parent container then things should work fine.
Funny you should mention that. Stay tuned…
Also there is a class added in Source on touch devices - offhand I think it’s stripped-touch - that you can use in your css if you are looking to apply different css for touch devices.
Hi Stuart, is there any progress on the possibilities to apply tiled backgrounds within Container/Containerplus?
Or the possibility to link to BWD Pro Styles?
Only currently possible via the Custom CSS option (in Container Plus or Container Base) - i.e.
background-image: url("image.jpg");
background-repeat: repeat;
Yes - you could probably use that if you liked by adding the relevant class name into the Container stack (wrapper CSS field) e.g. bg-vault-1
Thank you Stuart, I linked up to Pro styles.