CSS - Style broken images to look better on browsers | UI, javascript, jQuery, Bootstrap, PHP, Responsive design solutions.

Yes this is what you seen in chrome browser if your website has broken images. This will look very ugly if you have image with no accurate source.

Always write "alt" attribute for images. This will help search bots to understand about images. also if image is broken than browsers will show this alternative text. As shown in above image, the alternative text for image is "Broken image".

Now the question is how to style these broken images ?

The answer is : We can use <img> tags after and before css pseudo elements to style broken image.

Example:

HTML:

<body>
    <div class="row center-block">
        <div class="col-xs-6 col-md-6">
            <img src="https://website/boken-image.png"  alt="your image placeholder " />
        </div>
        <div class="col-xs-6 col-md-6">
            <img src="https://unsplash.it/250/300/?random" alt="awesome image" />
        </div>
    </div>
</body>

CSS:

body {
  background: #e9e9e9;
  padding: 25px;
  font-size: 12px;
  color: #777;
}

.row {
  max-width: 600px;
  margin: 0 auto;
}

img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #ddd;
  max-width: 250px;
  max-height: 300px;
}

img:before {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 35px 5px 20px 5px;
  font-family: Helvetica, Arial, sans-serif;
  content: "Broken image of " attr(alt) " (" attr(src) ")";
  color: red;
  text-align: center;
}

img:after {
  display: block;
  position: relative;
  top: -35px;
  width: 100%;
  height: auto;
  padding: 20px 5px;
  background: #fff;
  font-family: 'Glyphicons Halflings';
  content: "\e060";
  text-align: center;
}

Preview :

See the Pen Style broken images by Yashwant Patel (@yashwant) on CodePen.

Download Source

Post Tags:

CSS HTML

CSS - Style broken images to look better on browsers

Share This:

Post Tags:

Yashwant Patel

No Comment to " CSS - Style broken images to look better on browsers "