CODEWITHSUNDEEP
htmlcss
Mathemagician
Mathemagician

Reputation: 507

Put image in the center of bottom border with CSS

Everything is explained in the title of this post. I'm trying to put an PNG image in the center bottom border of a div element.

.content_block {
  border: ridge;
  border-width: 1px;
  border-color: #969696;
  height: 200px;
  width: 200px;
}
.content_block.orange {
  background-image: linear-gradient(#FBB03B, #FF9933);
}
<div class="content_block orange"></div>

Here's an image of what I'm trying to do:

enter image description here

I searched the net for a way to that with CSS, and border-image and stuff, but nothing worked.

Upvotes: 14

Views: 8592

Answers (4)

Gust van de Wal
Gust van de Wal

Reputation: 5291

To achieve the effect of it being exactly in the middle of the border, you will have to include the border with the image by inheriting it, and making it invisible. Like this, you can 'calculate' with it.

See this Fiddle for the effect. In this Fiddle, I've created a pseudo element that has a background-image of a play button.

The CSS that does the trick is this:

div::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 30px;
    height: 30px;
    background-image: url('http://www.iconsdb.com/icons/preview/gray/video-play-3-xxl.png');
    background-size: cover;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    border-top: inherit;
    border-top-color: transparent;
}

I've placed it to the absolute bottom and 50% from the left. Then with the transform property, I shifted it to be centered around these points (50% from the left, and 100% from the top);

Then to make it move along with the border, I inherited only at the top, and made it invisible.

Upvotes: 12

incalite
incalite

Reputation: 3207

Add an img in html

<div class="content_block orange">
       <img class='element' src='https://cdn0.iconfinder.com/data/icons/form-elements-kit/100/checked-green-rounded-01-128.png'/>
</div>

Add this to your css.

 .element { width:32px;
                height:33px;
                display:block;
                background-color:grey;
                margin-left:auto;
                margin-right:auto;
                margin-top:185px;
                border-radius:100%;
}

Hope that helps!

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206459

.content-block {
  position: relative;
  width: 200px; height: 100px;
  border: 1px solid #f0f;
}
.content-block img{
  position: absolute;
  left: 50%; bottom: 0;
  width: 50px; height: 50px; margin: -25px;
}
<div class="content-block">
  <img src="http://placehold.it/50x50" alt="">
</div>

If you have a relative positioned parent, you can manipulate the position of an inner child using position:absolute;

Upvotes: 4

eylay
eylay

Reputation: 2168

Put an image inside the orange div and add text-align:center to the div

<div class="content_block orange">
  <img src="" height="30" width="30">
</div>

and then set margin-top to the img. Check this Fiddle

Upvotes: -2

Related Questions