image border overlay on top of another image

I am struggling to place a border image above another image. The border image is not straight, so I need the overlays to be on top of the image instead of behind it. I attempted using z-index, but it did not work as expected. The border image does not appear above my image.

You can view the fiddle here.

Below is the code I have tried:

.sprocket-mosaic-image-container {
    position: absolute;
    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;
    z-index:1;
}

.sprocket-mosaic .sprocket-mosaic-image {
    position:relative;
     z-index:0;
}
cssz-indexborder-image

Answer №1

To achieve this, you have two options:

Using the image as a background

.custom-image-container {
    position: absolute;
    
     /** specify width and height of the image **/
    width: 375px;
    height: 281px; 
    
    /** set box sizing to include border dimensions in 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;
    
    /** use the image as background **/
    background: url(http://i.imgur.com/rdZ1sYQ.jpg) no-repeat;
    
    /** set origin so image is below the border **/
    background-origin: border-box;
    
    z-index:1;
}

.custom-image .custom-image-content {
    position:relative;
    z-index:0;
}
<div class="custom-image-container"></div>

Borders on an absolutely positioned pseudo element

If you prefer using an image tag (with unknown width and height), you can apply borders on an absolutely positioned pseudo element within the container.

.custom-image-container {
  position: absolute;
  z-index: 1;
}

.custom-image-container::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  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;
  content: '';
}

.custom-image .custom-image-content {
  position: relative;
  z-index: 0;
}
<div class="custom-image-container">
  <img src="http://i.imgur.com/rdZ1sYQ.jpg" alt="Custom Image" class="custom-image-content">
</div>

Answer №2

Personally, I don't think using a border image is the best approach for this scenario. It might be better to use additional elements to create the desired effect. You can try the following code snippet:

Check out this example on JSFiddle 
<div class="sprocket-mosaic-image-container">
    <span class="top-border custom-borders"></span>
    <span class="bottom-border custom-borders"></span>
    <span class="left-border custom-borders"></span>
    <span class="right-border custom-borders"></span>
    <img src="http://wildstar-mmo.de/images/sampledata/fruitshop/apple.jpg" alt="Simple Item 2" class="sprocket-mosaic-image">
</div>

.sprocket-mosaic-image-container {
  position:relative;
  margin-bottom: 15px;
  display: inline-block;
}

.custom-borders {
  background: url(http://www.wildstar-mmo.de/images/border-news.png);
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
}

.top-border.custom-borders {
  height: 35px;
  width: 100%;
}

.bottom-border.custom-borders {
  height: 82px;
  bottom: 0;
  top: auto;
  width: 100%;
  background: url(http://www.wildstar-mmo.de/images/border-news.png);
  background-position-y: -482px;
  background-size: cover;
  z-index: 444;
}

.left-border.custom-borders {
  height: 100%;
  width: 12px;
}

.right-border.custom-borders {
  right: 0;
  height: 100%;
  width: 13px;
  left: auto;
}

.sprocket-mosaic .sprocket-mosaic-image {
  border-radius: 3px;
  position:relative;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Design HTML dropdown menu

I have a sleek menu design with rounded buttons, and I am looking to extend the same style to the dropdown list. I have experimented with various approaches but there are two specific issues that I need assistance with: 1. Achieving rounded corners simil ...

htmlcss

Switching Present Tab in Rails

Within my application, I have a set of tabs displayed at the top thanks to a general layout in application.html.erb. Here's how they are structured: <li class="current"><%= link_to "Home", provider_path(current_user.id), :method=> "GET"%& ...

ruby-on-railscssdom

What is the best way to add a style to every child element of a specific type using SCSS?

Is there a way in SCSS to target all child elements of a specific type with a certain style? For instance, if I want to add a class called 'radioCircles' to a div that will give all radio buttons inside that div a border-radius of 10px. Keep in m ...

csssass

Browsing through a collection of images Tinder-style, compatible across multiple platforms (Hybrid / HTML5 compatibility accepted)

I have a vision to develop an app similar to Tinder, where users can swipe through a stack of photos. I am wondering if anyone has knowledge of how to achieve this effect on multiple platforms. My current plan involves creating a web app using jQuery Mobil ...

htmlcssjquery-mobileweb-applicationscross-platform

Having trouble with the page background image link not functioning properly because of the wrapper

I am facing an issue with my HTML layout. I have a full background image set within the body tag, followed by a wrapper element: <body> <a href="#" id="bkimage">Background Image</a> <wrapper> ................. Here are the styles ...

htmlcss

Show the div on top of all other elements

I need help implementing a multi-select feature with checkboxes as options. Unfortunately, the issue arises when the div containing the options causes other elements on the same row to resize. This is my current code: <html> <head> ...

htmljquerycss

Modifying the text color of a div class via CSS is not possible

I am currently facing an issue with styling a button made using a div. Despite my efforts to make the text white, the styling seems to be acting in unexpected ways. Below is the CSS section: .button a { text-align:center; display:block; backg ...

htmlcss

Ways to verify if the CSS background-color is set to white?

I am looking for a solution: $('*').click(function() { if($(this).css("background-color") == "#ffffff") { $(this).css("background-color") == "#000000" } });​​​​ that will execute on click of a specific cla ...

javascriptjquerycsscolors

Spin (svg, css) in a circular motion from any chosen point, without using the transform-origin property

My goal is to rotate an svg-rect around a specific point without relying on transform-origin, but instead using chained translates and rotation. After conducting some research, I discovered the following method: Translate the rotation point to the origi ...

cssmathsvgrotationtransformation

Is your jQuery TextEditor not functioning properly?

Having some trouble integrating the jQuery TextEditor plugin into my CodeIgniter project. I'm puzzled as to why it's not functioning properly. Just a heads up, my project also utilizes Bootstrap. Can anyone shed some light on why the plugin is fa ...

jquerycsscodeignitertwitter-bootstrap

What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute po ...

jqueryhtmlcss

Keep the text centered, even if it's larger than the container

I'm currently struggling to center some text. Here is how my text is currently formatted: <div class="panel panel-default" ng-repeat="criteria in controller.productCriteria"> <div class="panel-heading"> <div class="row flex ...

htmlcsstwitter-bootstrap-3

Get rid of the blue dots that appear on anchor tags

I am facing a strange issue with the anchors on my webpage. There are a few anchor tags in my body: <a href="link1.html"></a> <a href="link2.html"></a> <a href="link3.html"><img src="img1.png" /></a> Interestingl ...

htmlcss

What is preventing CSS from being applied to input[type=checkbox]?

Is there a way to directly apply CSS styles to checkboxes? I have only been able to find hacks for styling checkboxes or radio buttons. Why is it that checkboxes and radio buttons do not allow the same native CSS styles as input[type=button] or [type=tex ...

htmlcsscheckboxradio-button

How to override the styling of a parent element in CSS

I'm encountering an issue with my website's sidebar. I've set the background color to yellow for elements with the currentPage class. This works fine for the 'Home' tab, but when I try to do the same for a nested tab like 'tag ...

javascripthtmlcss

Achieving full height on a Bootstrap 4 row

I'm having difficulty getting a row to expand to occupy the remaining available height. I attempted to add h-100 to the row class, but this resulted in a white space at the bottom of the screen. I know there must be a solution out there, but I just ca ...

htmlcssgridbootstrap-4row

The appearance of dotted points changes when they are printed on paper

Check out this customized printable application form that allows users to easily input their information and print it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Custom Printout</title> ...

htmlcss

The text and links should appear transparent against a gradient background; however, they are displaying in white

I am currently facing a small issue while working on my new website, www.dvpwebdesign.com. The problem arises in Internet Explorer (IE) when the intro page displays a repeated gradient background with text and links overlaid on it. While the layout works ...

htmlcss

A method for aligning two different font sizes vertically within a single <p> element

My question is, how can I vertically align the following: Goal: - - | - | - - Currently, the vertical alignment defaults to baseline. Current Alignment: _ _ | _ | _ _ HTML: <div class="moduleResult"> <p>You have <span class= ...

htmlcss

Create a cohesive user experience by implementing the same CSS animation when hovering over two distinct elements

For a learning exercise, I attempted to create an animation. My goal was to have the circle trigger an animation when hovered over, while also revealing the text in the .hide element. However, as soon as I hover over the circle and then move my mouse onto ...

htmlcss