thekraeuterbutter thekraeuterbutter - 5 months ago 10
CSS Question

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

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




Answer

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