xxxxxxxxxx1
<template>2
<!-- Background image -->3
<div4
class="bg-image"5
style="6
background-image: url('https://mdbootstrap.com/img/new/fluid/nature/011.jpg');7
height: 100vh;8
"9
>10
<div class="mask gradient-custom">11
<div class="d-flex justify-content-center align-items-center h-100">12
<h1 class="text-white mb-0">Page title</h1>13
</div>14
</div>15
16
</div>17
<!-- Background image -->18
</template>xxxxxxxxxx1
<style>2
.gradient-custom {3
/* fallback for old browsers */4
background: #a18cd1;5
6
/* Chrome 10-25, Safari 5.1-6 */7
background: -webkit-linear-gradient(8
45deg,9
rgba(29, 236, 197, 0.6),10
rgba(91, 14, 214, 0.6) 100%11
);12
13
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */14
background: linear-gradient(15
45deg,16
rgba(29, 236, 197, 0.6),17
rgba(91, 14, 214, 0.6) 100%18
);19
}20
</style>xxxxxxxxxx1
<script>2
3
</script> Console errors: 0