Imran Bughio Imran Bughio - 1 month ago 6
CSS Question

Grayscaled text over cover image

I am trying to create a layout similar to this:

Grayscaled letter over background image

I know I can create the "A" using svg or clip-path but the problem is I want to keep the background inside the "A" aligned with the body background i.e if the window resizes the background image will react as a cover reacts and so should the image inside the "A".

I am running out of ideas to how can I accomplish this... the last thing I can think of is using

background-attachment: fixed
and creating the "A" using complex CSS like lots of divs with different width/height, border radius, translate etc to create the letter "A".

EDIT:
I think I didn't made the case clear so please check this Demo of what I am trying to achieve.
Note how the grey scale spot stays aligned with the text div when you resize the browser while the background image is set to cover width and height regardless of the view port size & the image inside the spot changes to render the same spot ... I just want to have more complex shape like an A or Z instead of that odd shape.

Answer

You could use clip-path and point at an SVG <clipPath>. Works in everything except IE.

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  
  -webkit-background-size: cover;
  background-size: cover;
}

.txt {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  color: #fff;
  max-width: 500px;
  padding-top: 20px;
  margin: 50px auto;
  position: relative;
}

.a{
  position: absolute;
  left: -100px;
  top: 0;
  width: 100px;
  height: 100px;
  clip-path: url(#tri);
  -webkit-clip-path: url(#tri);

  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  background-size: cover;
  
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
<div class="wrap">
  <div class="txt">
    <div class="a"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsum, distinctio molestiae iste ab eum tempore excepturi fugit placeat veniam. Hic minus dolorum, reprehenderit atque, nobis rerum. Quis incidunt, beatae!
  </div>
</div>

<svg width="0" height="0">
  <clipPath id="tri" clipPathUnits="objectBoundingBox">
    <path d="M 0.5,0 L 1,1, 0,1 Z
             M 0.5,0.3 L 0.3,0.7 L 0.7,0.7 Z"/>
  </clipPath>
</svg>

Demo fiddle

Comments