With geriatric Internet Explorer versions this site looks shite. This because Impossiblue is built with modern tools and would require hacks and workarounds to function in legacy browsers. I no longer have the patience nor the inclination to satisfy everybody. Impossiblue is an experiment and a playground – and my sustenance does not depend on it. As a concequence – to embarrass nobody – I have decided to lock you out. So, there.

Impossiblue

CSS background – Part 1

background-image

Just celebrating the possibility in CSS to use more than one image in the background of a block element. Please refer to the code below.

div {
	width: 262px; /* e.g. */
	height: 88px; /* e.g. */
	background-image: url("nw.png"), /* Topmost image */
	                  url("ne.png"),
	                  url("se.png"),
	                  url("sw.png"),
	                  url("bg.jpg"); /* Bottommost image */
	background-position: 5px 5px,
	                     right 5px top 5px,
	                     right 5px bottom 5px,
	                     left 5px bottom 5px,
	                     center;
	background-repeat: no-repeat; /* In this case: Identical for all images */
	background-color: #475f14; /* Fallback should images fail to load */
	}

The file path for the main background image ("bg.jpg" aka rusted metal plate) is inserted last in the comma-separated row of URLs. The screws do not interfere with each other so they can be stacked howsoever in this case. To be systematic, however, they are positioned top left ("nw.png" aka north west), top right ("ne.png" aka north east), bottom right ("se.png" aka south east), and bottom left ("sw.png" aka south west). Each screw is indented 5 pixels from each side.

Tip: Change the width of the browser (i.e. make it more shallow) to appreciate the effect of each screw sticking to their corners while the plate below is “cropped”.