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?



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.

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.


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.


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.

1 Like

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.