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?
@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!
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.
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.
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?