Me box

Me box

by Imri Paloja

HTML

<div id="me">
<a data-title="Imri Paloja" href="http://www.eurobytes.nl/images/corneillie-black-red.jpg" id="article-image">
    <!--
  <img alt="Imri Paloja" src="http://www.eurobytes.nl/images/corneillie-black-red.jpg">
      -->
</a> 
    
    <a data-title="profile for blade19899 on Stack Exchange, a network of free, community-driven Q&amp;A sites" target="_blank" href="http://askubuntu.com/users/36315/blade19899" id="flair">
        
 <img alt="profile for blade19899 on Stack Exchange, a network of free, community-driven Q&amp;A sites" style="width:208px;height:58px;" target="_blank" src="http://stackexchange.com/users/flair/1079742.png">
     
</a>
    </div>

CSS

#me {
    background-color:#EEEEEE;
    border: 1px solid #CCCCCC;
    width: 45%;
    height:200px;
    padding: 1px;
    position:absolute;
}

#me a[data-title="Imri Paloja"] {
    background-image:url(http://www.eurobytes.nl/images/corneillie-black-red.jpg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    position: absolute;
    width:100%;
    height:100%;

}


#me #flair img {
    margin-top:62%;
    margin-left:5%;
    position:absolute;
}