Background background with text

3

How do I make this effect of letters over the image that is like Background, or how do I search for it in google?

    
asked by anonymous 09.02.2018 / 02:47

2 answers

4

Based on Marcelo Rafael's comment, I have found a solution for your case.

Support is even interesting, as you can see this link of Can I Use.

.text {
	width: 100%;
	height: 100vh;
	background: url('https://www.screenaustralia.gov.au/sacms/media/samedialibrary/screenguide/titles/tid33797-mountain/tid33797-web/tid33797-mountain-001-hero.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	font-weight: bold;
	font-family: verdana, sans-serif;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	display: flex;
	justify-content: center;
	align-items:  center;
  flex-direction: column;
	text-align: justify;
	max-width: 100%;
	}
	span{
		text-shadow: 0 0 20px rgba(255,255,255,.2);
    font-size: 7em;
	}
  p{
    -webkit-text-fill-color: #fff;
    font-family: 'Helvetica', 'Source Sans', sans-serif;
  }
	body {
	background: url('https://www.screenaustralia.gov.au/sacms/media/samedialibrary/screenguide/titles/tid33797-mountain/tid33797-web/tid33797-mountain-001-hero.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	max-width: 100wh;
	padding: 0;
	margin: 0;

}
.outer-text{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.7);
}
<body>
	<div class="outer-text">
		<div class="text">
			<span>Stack.</span>
      <p>É divertido ajudar.</p>
		</div>
	</div>
</body>
    
09.02.2018 / 08:10
2

I'll give you a solution using mix-blend-mode: overlay; in the text, and two backgrounds on the background, one with the image, and one with the black layer with transparency on top.

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
}

header {
	margin: auto;
    overflow: hidden;
    height: 100%;
	width: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_03.jpg);
	background-size: cover;
}

h2 {
    color: #fff;
    font-size: 10vw;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    mix-blend-mode: overlay;
}
<header>
    <h2 contentEditable role='textbox' aria-multiline='true' >And stay alive</h2>
</header>
    
10.02.2018 / 19:30