I am trying to use a font-icon as a background image, and I using flexbox to center it horizontally and vertically. I have set this to the body.
I want all other content to above the font-icon, and I am using the same flex properties to center the content.
I have created a pen on codepen.
------html-------------
<div class="module-card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem possimus ipsam commodi consequuntur quo dolor ad cupiditate blanditiis perferendis maiores incidunt dolores similique officiis a provident, obcaecati temporibus! Culpa, reprehenderit.</p>
</div>
-----css-------------
body{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
z-index:-1;
}
body:before {
content: "\f113";
font-family: FontAwesome;
/*--adjust as necessary--*/
color: blue;
font-size: 30em;
text-shadow: 2px 2px #ff0000;
}
.module-card {
width:50%;
background: #fff;
padding: 10px;
display: flex;
flex-direction: column;
background: rgba(0,191,255,0.2);
z-index:9999;
}
Is it possible at all to do this instead of a background image?
thanks, Sohail.
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height:100vh;
z-index:-1;
position: relative;
}
body::after {
content: "\f113";
font-family: FontAwesome;
color: blue;
font-size: 30em;
text-shadow: 2px 2px #ff0000;
}
.module-card {
width:50%;
background: #fff;
padding: 10px;
display: flex;
/* flex-direction: column; */
background: rgba(0,191,255,0.2);
z-index:9999;
/* center and overlay content */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}