Border-Image Over an Image

border-image over an image

You can achieve that by:

Using the image as a background

.sprocket-mosaic-image-container {    position: absolute;         /** define width and height of the image **/    width: 375px;    height: 281px;        /** set the box sizing so the border dimensions would be part of the width and height **/    box-sizing: border-box;         border-style:solid;    border-width: 60px 28px 87px 24px;    -moz-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;    -webkit-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;    -o-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;    border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;        /** set the image as background **/    background: url(http://i.imgur.com/rdZ1sYQ.jpg) no-repeat;        /** define the origin so the image would be under the border **/    background-origin: border-box;        z-index:1;}
.sprocket-mosaic .sprocket-mosaic-image {    position:relative;     z-index:0;}

<div class="sprocket-mosaic-image-container"></div>

Overlay image on div border top left

Not quiet getting your question as there are no images or any demo for the desired effect you are trying to achieve, but from what I understood, you can use position: relative; for the container div and use a literal img tag inside the div and use position: absolute; with top: -1px; and left: -1px; respectively.

If you are trying to make the background-image move out of the element area than it's not possible...you need to use img for this

<div>
   <img src="#" />
</div>

div {
   position: relative;
   border: 1px solid #000;
}

img {
   position: absolute;
   left: -1px;
   top: -1px;
}

Update: (After you added a demo)

Do you need something like this?

Offset a border over an image

Wrap the image with an inline block, and set an absolutely positioned pseudo-element as the border:

body {  padding: 50px 0 0 80px;}
.imageContainer {  display: inline-block;  position: relative;}
.imageContainer::before {  position: absolute;  top: -5%;  left: -15%;  width: 100%;  height: 100%;  border: 4px solid #77B244;  content: '';}

<div class="imageContainer">  <img src="https://cdn.pixabay.com/photo/2013/07/31/12/25/cat-169095_960_720.jpg" alt="services_gas_oil" border="0"></div>

CSS: What's a better way to overlay an image over a div border?

You can just change margin-top: -13px with the transform: translateY(-50%); and you will get exactly the same result, and you won't need to calculate the negative pixels.

Inner border over images with CSS?

You can do this without having an extra element or pseudo element:

http://cssdeck.com/labs/t6nd0h9p

img {
  outline: 1px solid white;
  outline-offset: -4px;
}

IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline

Alternate solution that doesn't require knowing the dimensions of the image:

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>

div.ie-container {
  display: inline-block;
  position: relative;
}

div.ie-container:before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid white;
}

img {
  vertical-align: middle; /* optional */
}

How to add border inner side of image using CSS

That one's quite simple. Put the image in a container, and give it an after. Give that after a absolute position and a border.

See the example:

.gallery {  height: 300px; /* change/remove as required */  width: 400px; /* change/remove as required */  border-radius: 10px; /* change/remove as required */  overflow: hidden;  position: relative;}
.picture:after {  position: absolute;  top: 10px;  left: 10px;  right: 10px;  bottom: 10px;  border: 2px solid pink;  border-radius: 10px;  content: '';  display: block;}

<div class="gallery">    <div class="picture">            <img id="main-product-img-43" itemprop="image" title="Picture of $25 Virtual Gift Card" src="http://lorempixel.com/400/300" alt="Picture of $25 Virtual Gift Card">
    </div></div>

Is there a way to flip the border image on the left side only?

Flipping image is done by transform

-webkit-transform: scaleX(-1);
  transform: scaleX(-1);

Hope this help.

Add border to image on hover with padding

This will work for you:

I have just added border: 4px solid transparent; and removed the margin and compensated it with the border and on hover reset it.
Fiddle

.home-item1 {  height: 107px;  width: 108px;  cursor: pointer;  box-sizing: border-box;}
.home-item1 img{  border: 4px solid transparent;  border-radius: 50%;  padding: 0px;  transition:all 0.2s ease-in-out;}
.home-item1 img:hover{ border: 2px solid red; margin: 0px; padding: 2px;}

<div class="home-item1">  <img src="http://lorempixel.com/110/110/" alt="Sample Image"></div>

---

Related Topics