thekraeuterbutter thekraeuterbutter - 1 year ago 80
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 {

width: 50px;

.left:after {
content: "";
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 Source

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

<div id="background">
  <div id="m">M</div>
<div id="title">eanwhile</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;}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download