slides

CSS background images

opening slide: CSS background images

beautiful textures: patterns, tiles & formats.
Creating seamless patterns on the example of a custom 404 page, with a look at suitable file formats for online use.

opening slide: CSS background images
text: steps covered: 1. file organisation, 2. sketching & planning, 3.	creating seamlessly tiling textures
						adding repeating illustrations
404 page screenshot: balloon suspending sign with error message above green hillside with blue sky
1. file organisation example of 2 folders: preparation folder + site assets folder
2. sketching & planning: recap on vector (resolution-independent) and bitmap (resolution-dependent)
digital greyscale sketch of graphic elements
2. sketching & planning: step1: plan/sketch + step2: finalise for final output
annotated sketch of graphic elements, highlighting graphics
annotated sketch of graphic elements with solid fill, highlighting graphics
annotated sketch of graphic elements, highlighting graphics - full colour
3. creating seamless tiling textures: showing noise settings and gradient editor
3. creating seamless tiling textures: layer and adjustment layer screenshots
3. creating seamless tiling textures: example of clouds as pattern, using Offset filter
3. creating seamless tiling textures: useful tools for editing: clone stamp; spot healing brush, healing bruash and patch tool
3. creating seamless tiling textures: demo of gradient via background repeat-x in CSS
3. creating seamless tiling textures: demo of dropshadow via background repeat-y in CSS
3. creating seamless tiling textures: demo of pattern via background repeat in CSS
4. adding repeating illustrations: via varying repeats and alignments of background images
3. creating seamless tiling textures: demo of pattern via background repeat in CSS
annotated final
final design in place

download slides PDF, 7.6MB (optimised) PDF, 22.6MB (original)

the tutorial

The slides cover tips for image creation and accompany the tutorial Get to grips with CSS3 multiple background images: a step-by-step work-through the implementation of a 404 page design via background images.

sidenote: This tutorial was written in 2011 for .net magazine, featured exclusively on the Creative Bloq website, to cover the then-new CSS3 technique. Sadly, the original webpage is now quite broken, lost all comments, images are distorted and code awkwardly formatted. As it's been over a decade now, I decided it's ok to publish a clean version on my site for a nicer reading experience :)

tutorial links read tutorial [on creativebloq.com] read tutorial on eyelearn view final design

download links for source files Depending on how you prefer to work through the tutorial, you can choose to download only the images and follow the tutorial for all code. Or download the project folder which in addition includes full HTML and partial CSS (to be edited). image folder project folder