How i can put a picture above a border in css?


Tags: css,image,border

Problem :

I want to know how I can manage something like this in css.

enter image description here

I mean the M, in my case this is a picture of a letter, which have to go over a border.

I try it on tipeeestream on a event list, and I've tried some things, but doesn't work. The problem is, that I don't get a good resource about their css style and I have to get a informations about the browser about their css sytle.

Can someone help me out please?

Edit: This is my css code in their editor

 .event .left {
    border-style: solid;
    border-width: 3px 0 3px 3px;
    border-color: black; 
 }
.left {
    
    position:relative;
    width: 50px;
    
}
.left:after {
    content: "";
    position:absolute;
    overflow:visible;
    width: 100px;
    height: 100px;
    display: block;
}
.event .middle, .event .right {
    border-style: solid;
    border-width: 3px 3px 3px 0;
    border-color: black;
}
.event.middle-event .middle, .event.middle-event .left, .event.middle-event .right{
    background: transparent;
    border-style: none;
}
.event.last-event .middle, .event.last-event .left, .event.last-event .right{
    background: transparent;
}



Solution :

You can try with absolute and relative positioning for each of the elements, the background, the M, and the "eanwhile".

http://codepen.io/ruchiccio/pen/zBoGXY

<div id="background">
  <div id="m">M</div>
<div id="title">eanwhile</div>
</div>

#background {width:500px; height:100px; background-color: yellow; border:4px solid black; position:relative;}

#m {font-size:220px; position:absolute; top:-80px;}

#title {font-size:70px; position:absolute; top:10px; left:180px;}

    CSS Howto..

    How to run PHP through Adobe Muse generated CSS

    How to style more than one ul

    Looping through my table, how do I know if the checkbox is checked?

    How to center images vertically these divs?

    How to center my

    text using css?

    How to represent dual-cell format in CSS?

    how to select all list items except for the first and last using CSS only?

    How to only make a css element appear on one page?

    How to make a CSS scroll follow div stop follow at a position

    How to set background image for body tag using css?

    How do you associate a css/sass stylesheet to a view in rails?

    How to make a div box with display:flex clickable like display:block?

    CSS HTML How to make a larger image than div display in full in div

    style a navigation link when a particular div is shown

    CSS How to animate a transition from opacity 0 upon hover

    Using jquery to swap text, how to revert other text to original?

    how can i add style with CSS to