CSS-Tricks Example

Images in All Four Corners

By CSS-Tricks

[DOWNLOAD EXAMPLE]

#upper_left {
width: 125px; height: 125px;
position: absolute;
top: 0; left: 0;
background-image: url("images/upper-left.jpg");
background-repeat: no-repeat;
background-color: red;
}

#upper_right {
width: 125px; height: 125px;
position: absolute;
top: 0;
right: 0%;
background-image: url("images/upper-right.jpg");
background-repeat: no-repeat;
background-color: red;
}

#lower_left {
width: 125px; height: 125px;
position: absolute;
bottom: 0%; left: 0;
background-image: url("images/lower-left.jpg");
background-repeat: no-repeat;
background-color: red;
}

#lower_right {
width: 125px; height: 125px;
bottom: 0%;
right: 0%;
position: absolute;
background-image: url("images/lower-right.jpg");
background-repeat: no-repeat;
background-color: red;
}