Background image for Source site?

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} }

1 Like

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.

2 Likes

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.

1 Like

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.

2 Likes

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…

3 Likes

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.

1 Like