Creating Unexpected Incongruity

Creating Unexpected Incongruity

Problem

You need to grab the reader's attention by using two elements that don't seem to fit together.

Solution

Place one element visually inside the other. In the web page in Figure, which shows Earth's close call with an asteroid, an image of Earth from space was placed over an image of a game of pool.

An image of Earth placed over an image depicting a game of pool

```<h2><span class="no">Earth News</span></h2>
<p>Earth escapes potential impact with killer asteroid;
will we escape the next one in 2014? <a href="more.html">Read
more</a></p>```

For the CSS, place the photo depicting the game of pool into the body element and position it in the upper-left corner. Then use the image replacement technique discussed in Recipe 3.9 to place the photo of Earth for H2:

```<style type="text/css">
body {
background-color: #009E69;
margin: 0;
background-image: url(billiard.jpg);
background-repeat: no-repeat;
}
h2 {
background-image: url(earth.gif);
position:absolute;
width:126px;
height:126px;
z-index:1;
left: 166px;
top: 69px;
}
.no {
display: none;
}
p {
width: 120px;
margin: 260px 100px 0 170px;
font-family: Verdana, sans-serif;
font-size: small;
font-weight: bold;
}
</style>```

Discussion

A great way to grab attention is to show something that is unexpected. Cleverly combining two different elements into one image can force viewers to pay attention to the image (see Figure), or it can simply underscore the purpose of the content.

Photos of a child and man are combined

This example used two imagesone of a pool cue and cue ball, and the other of Earth. The former image was placed as the background image for the body element. The image of Earth was placed in the background of h2 and was moved by setting the position to absolute. Then it was composited over the pool image.