Grow your CSS skills. Land your dream job.

Put Images in All Four Corners with CSS Positioning

Published by Chris Coyier

It can be a mighty cool effect to have images that nestle themselves in the four corners of your webpage. You can achieve this positioning with CSS fairly easily without affecting any of your other page content. You may also pick and choose which corners you want to use, if you don't wish to use all four. Here is the basic theory:

#upper_left {
	position: absolute;
	top: 0;
	left: 0;
}
#upper_right {
	position: absolute;
	top: 0;
	right: 0%;
}
#lower_left {
	position: absolute;
	bottom: 0%;
	left: 0;
}
#lower_right {
	bottom: 0%;
	right: 0%;
	position: absolute;
}

allfourcorners.png

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".