Display Image Over Corner of Single Post Header in Genesis

This tutorial enables you to display any type of image on the left or right hand corner of your single posts.

Here’s an example showing the Gravatar displayed on the left corner of all single posts.

Note: PHP code goes at the end of your child themes functions file & CSS code at the end of your style.css file.

Display Gravatar on Corner of Post

Both the PHP and CSS generate exactly what you see in the 1st screen shot above.

.single .entry-avatar .avatar {
	background-color: #fff;
	float: none;
	margin-top: -80px;
	margin-left: -80px;
	border-radius: 50%;
}

.single .entry-title {
	font-size: 36px;
	font-size: 3.6rem;
	line-height: 1;
	margin-top: -40px;
	padding-left: 20px;
}

Display Any Image on Corner of Post

This example pulls an image from your child themes images folder.

.single .corner-image img {
    background-color: transparent;
    height: 80px;
    width: 80px;
}

.single .corner-image  {
	background-repeat: no-repeat;
	float: none;
	margin-top: -80px;
	margin-left: -80px;
}

.single .entry-title {
	margin-top: -20px;
}

Here’s a screenshot of what the PHP & CSS generate:

You could even re-position some of the entry meta like the published date and display that over an image in the corner of each post.

Related Tutorials

• Add Image Over Corner of Post Archive in Genesis
• Add Post Date In Circle On Corner of Posts Entry Header in Genesis