image bleed outside parent container

Published on 25 Mar 2017

It is prettier to have the image to bleed outside the parent container in certain situations especially when the body content is quite narrow, like this blog. Few days ago I tried doing that by creating a new CSS file and linking it to the header (partials/head.html), that did not work.

This time I went to the theme’s main CSS and tried my luck there. It worked!

/* bleed .img inside #post-body, by @aixnr based on TryGhost/Casper */
#post-body img {
	display: block;
	max-width: 150%;
	height: auto;
	padding: 0.6em 0;
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%); /* for Safari and iOS */
	-ms-transform: translateX(-50%); /* for IE9 */
	transform: translateX(-50%);

/* for media below @500px, by @aixnr based on TryGhost/Casper */
@media only screen and (max-width: 500px) {
	#post-body img{
		padding: 0;
		width: calc(100% + 32px);
		 min-width: 0;
		 max-width: 112%;

This CSS code is adapted from Ghost’s default theme, Casper. At first I did not implement media query, then I found out that the bleed happened on phone. I put the media query for screen at @500px and below and then the bleed did not happen anymore.

I am a happy kid!

p.s.: I don’t know CSS. I try my luck every time by doing things differently.