Skip to content

Instantly share code, notes, and snippets.

@ManUtopiK
Last active September 10, 2016 23:28
Show Gist options
  • Save ManUtopiK/48bcf45da669dc6d4c2ae51e6a73273e to your computer and use it in GitHub Desktop.
Save ManUtopiK/48bcf45da669dc6d4c2ae51e6a73273e to your computer and use it in GitHub Desktop.
Beautiful placeholder for broken image
/* Adding Helpful Information */
img {
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;
width: 100%;
height: auto;
display: block;
position: relative;
}
img:before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
/* Replacing The Default Alternative Text */
img { /* Same as first example */ }
img:after {
content: "\f1c5" " " attr(alt);
font-size: 16px;
font-family: FontAwesome;
color: rgb(100, 100, 100);
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
/* Extra Styling with FontAwesome */
img {
/* Same as first example */
min-height: 50px;
}
img:before {
content: " ";
display: block;
position: absolute;
top: -10px;
left: 0;
height: calc(100% + 10px);
width: 100%;
background-color: rgb(230, 230, 230);
border: 2px dotted rgb(200, 200, 200);
border-radius: 5px;
}
img:after {
content: "\f127" " Broken Image of " attr(alt);
display: block;
font-size: 16px;
font-style: normal;
font-family: FontAwesome;
color: rgb(100, 100, 100);
position: absolute;
top: 5px;
left: 0;
width: 100%;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment