font icon as page background with flexbox

Question

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.

score 1 · Answer 1 · answered Oct 28 '15 at 20:17

Just need to modify your html/css to something like here: http://codepen.io/anon/pen/EVLpGq

HTML:

<div class="someother-dif">
<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>
</div>

CSS:

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
  z-index:-1;
}



/*replace the content value with the
corresponding value from the list below*/

body:after {
    content: "\f113";
    font-family: FontAwesome;
/*--adjust as necessary--*/
    color: blue;
    font-size: 30em;
    text-shadow: 2px 2px #ff0000;
    z-index:1;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    position: absolute;
    font-size: 400px;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -200px;
    z-index: 1;

}

.someother-dif:after{

}

.module-card {
  width:50%;
  margin-left:auto;
  margin-right:auto;
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background:  rgba(0,191,255,0.2);
  z-index:9999;
  position:relative;
}

score 1 · Accepted Answer · answered Oct 28 '15 at 20:27

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%);
}

DEMO: http://codepen.io/anon/pen/zvjLyV

font icon as page background with flexbox

2 Answers2