a virtual burka for bikini model Kate Upton

• The following cascading style sheet formatting...

<div style="	width: 124px; height: 69px;
	background-image:url('https://31.media.tumblr.com/ cb208f23be8c5b7f8ec74b65a9e0b1bc/ tumblr_nckypp4zmb1sfer7xo1_1280.jpg');	"></div>

• ...will show us merely a portion of an image which is seven hundred ninety-seven pixels wide by a dozeny hundred pixels tall as the background of a div. It specifically shows us what is in the very upper left corner.

• If we wish to offset the chunk of the greater image shown to in effect show a different chunk of the greater image we may do so with the background-position CSS property like so...

<div style="	width: 124px; height: 69px; background-position: -391px -825px;
	background-image:url('https://31.media.tumblr.com/ cb208f23be8c5b7f8ec74b65a9e0b1bc/ tumblr_nckypp4zmb1sfer7xo1_1280.jpg');	"></div>

• ...creating an effect like such:

• I was a little surprised to learn that if we moreover rotate one hundred and eighty degrees like this...

<div style="	width: 124px; height: 69px; background-position: -391px -825px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);
	background-image:url('https://31.media.tumblr.com/ cb208f23be8c5b7f8ec74b65a9e0b1bc/ tumblr_nckypp4zmb1sfer7xo1_1280.jpg');	"></div>

• ...that the content rotated will be restrained to the original "selection" instead of showing us what is offset from the lower right corner of the background image. I guess I shouldn't really have been surprised. We are, after all, rotating the div itself and not the background image. Duh.

 
 

Addendum 12/14/2015: Yesterday I realized that the tumblr image has been done away with and thus this blog posting has been sabotaged. Here is a recreation of sorts of what once was:

 
 

Addendum 6/5/2018: The missing image is back! Good stuff. Silly tumblr.