CODEWITHSUNDEEP
cssimageborder
thekraeuterbutter
thekraeuterbutter

Reputation: 13

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

Upvotes: 1

Views: 183

Answers (3)

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2574

You can set overflow: visible to the element containing the image and then give the image negative margin top.

eg:

<div style="overflow: visible;">
    <img src="..." style="margin-top: -40px" />
    ...
</div>

I have styled them using inline styles only for demo purposes, the styles should be applied using classes if you want to follow best practice.

Upvotes: 0

Rachel S
Rachel S

Reputation: 3920

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

Upvotes: 2

Joey M-H
Joey M-H

Reputation: 773

As the commenters mentioned, please include the code that you have tried so far next time.

Using CSS, the easiest way to do this is set the element with the border (I've chosen the class .box) to have position:relative;. Then put the image in the box, and set its position as: position:absolute;. After this, you can move the image around freely, relative to the .box. Here is an example: http://jsbin.com/dimonilife/edit?html,css,output

Upvotes: 0

Related Questions