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 position two
    elements side by side?

    How to convert list of buttons to radio buttons based on row overflow?

    CSS isn't shown when HTML file is opened in Word

    How can I make the parent div draggable

    How to darken a background using CSS?

    how can we use and control Gradient

    How to position a background image without background-position property

    How to do mutiple css class in one line javascript code

    How to add css and js files on node pages independent of the theme?

    how to get value of colors from CSS

    CSS: how to make margin: 0px auto work

    how to run html$css$js files locally on browser [closed]

    how to change css style for every second data (picture) from database?

    How to select 3rd 'a' tag in a list for RSpec test?

    How do I insert content after text in an html element using CSS?

    How to make content fill space inside
    tag in html?

    How can I load css file in Meteor for just one page?

    In a responsive layout how can I get divs to shrink uniformly?

    How to apply gradient to the border of a div?

    How to make this CSS compatible with IE browsers? [closed]

    How to control number of items per row using media queries in Flexbox?

    How to hover a Fixed element until it reaches some point

    How to test CSS selector performance?

    How to override overridden class — CSS

    HTML5/CSS: How to set the height of the page without considering the footer?

    How to: Reduce font-size if a line breaks

    How do I keep dropdown menus the same width of top level categories with auto width

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    in html and css how to get the box space to be smaller? [closed]

    How to make width of navigation auto, while absolutely positioning its wrapper