overlaying an image with text in Materialize CSS - html

Question

I've tried multiple ways to overlay the background image with text, to no avail. The template provided on the materializeCSS website involves parallax, which I don't want.
The aim is to have a 'card' sit on top of a large image stretching across the browser window. I actually aim to do this separately for several cards.
Here's my code (for a particular card):
<div class="row center">
<div class="col s12 l6 offset-l6">
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
</div>
</div>
</div>
</div>
I understand that the image tag is to be:
<img src="URL">
But wherever I put it, it doesn't place an image behind the card. I've tried all the obvious stuff such as adding a new div class, but perhaps I'm adding the wrong kind. really racking my brains on this one.
How do I place an image (spanning the width of the browser and around 700px in height) behind a card?

Answer 1

Thank you for your responses!
It was very simple in the end:
<div class = "iris">
<div class = "card transparent z-depth-5">
</div>
</div>
Basically you wrap a div around the card div and then for, in this case, iris, you set the background image using CSS.
.iris {
background-image: url("");
background-repeat: no-repeat;
height: 100vh;
background-size: cover;
}
By using card class 'transparent' you get this cool effect whereby the card is actually see-through and looks like glass, but you do need a high z-depth index so that the shadow of the card illuminates its edges.
Cheeeeers

Answer 2

You can do this in 2 ways
Use the background(background-image) css property. You can also set the background-size to help with the background size (ie keep the image contained in the parent, let it overflow, stretch to fit etc)
Set position css property of the img element to absolute, set the z-index of the card to some value higher than the z-index of the img element.
Do not know if Materialize CSS provides premade css classes for some of these settings you would have to check their documentation.
background css property
CSS
.cardbg {
background:url(URL) no-repeat 0% 0%;
background-size:cover;
}
HTML
<div class="cardbg">
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
</span>
</div>
</div>
Positioned img element
CSS
.container {
position:relative;
}
.card {
position:relative;
z-index:10;
}
.cardbg {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
}
HTML
<div class="container">
<img src="URL" class="cardbg" />
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
</span>
</div>
</div>
background css demo
.cardbg {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:url(http://placehold.it/1024x768) no-repeat 0% 0%;
background-size:cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="cardbg">
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
Some card
</span>
</div>
</div>
Positioned element demo
.container {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.card {
position:relative;
z-index:1;
}
.cardbg {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="container">
<img src="http://placehold.it/1024x768" class="cardbg" />
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
Some text
</span>
</div>
</div>

Answer 3

You can add the image as background of some div, or even the whole body
body {
background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRLcjS59w8iUV6NqkYvcHOzlqS21rr13KyqGppuYJf5KI88AYB_IA');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="row center">
<div class="col s12 l6 offset-l6">
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">Title</span>
<p class="grey-text text-darken-1">Content sdfa sd fas dfa sdf</p>
<br>
<p class="grey-text text-darken-1">Content sdfa sd fas dfa sdf</p>
</div>
</div>
</div>