Ryanthehouse Ryanthehouse - 2 months ago 13
CSS Question

Further Scale CSS Background Cover Property

I have a splash image that is set as a background to a containing

<div>
via CSS. The element style is currently set as follows:

#splash{
background: url('image');
background-repeat: no-repeat;
background-size: cover;
filter: blur(5px);
}


This is all fine except for the
filter:blur(5px)
line. This leaves a 5 pixel "soft edge" around the image show here:

Example of soft edge on image

If I can further cover the
<div>
by 5px, I will achieve the same blur effect and maintain a sharp edge.

I can re-position the image render point and "cheat-it-over" a bit, but I want to know if there is a better way.

Thanks.

Answer

I played around with it a little and just found a working solution which doesn't even require touching the html. It works by stacking two generated elements via :before and :after. It does require you to add overflow: hidden; to your div#splash because otherwise the blurred image exceeds the container boundaries, and also position: relative; or position: absolute; to make the absolute positioning and "sizing" of the pseudo elements work.

#splash {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 280px;
}
#splash:before {
  border: 5px solid white; // user the corresponding backgroundcolor of your page here
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}
#splash:after {
  background: url(http://lorempixel.com/200/280);
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  display: block;
  filter: blur(5px);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}
<div id="splash"></div>

http://codepen.io/anon/pen/jrBVrp