CSS border-image negative positioning (no HTML required)

We are on the lookout for a way to apply a specific border style to nearly all img tags within the content area of a CMS (such as Wordpress or Joomla). Our goal is to achieve this solely using CSS without having to access any parent tags:

The initial step is straightforward with the code found here: http://border-image.com/ (the link should display our border image), but it results in a gap between the image and the border edge.

We initially tried some CSS properties that seemed promising, but encountered roadblocks:

  1. border-image-outset: only extends to the outer side, not the inner side, useful for solid background colors
  2. outline-offset: only works for outlines, not border images
  3. Multiple Backgrounds: the most viable option, but the borders appear below the image, necessitating additional padding. We want them to overlap the image as intended (which is what we have currently implemented).

We have explored similar questions and attempted to implement the most relevant solutions:

  1. ::after: requires the image to have content="", which makes it disappear
  2. JQuery $(img).after: We are unable to position the border elements relative to the corresponding image since they are inserted after the image itself. This would require setting it on the parent tag, which often doesn't have the same dimensions as the image. We are currently experimenting with wrapping.

So far, we have not been successful in resolving the issue as intended.

Here's a JSFiddle where we are testing all the aforementioned options and have sufficient resources to work with (clean image, grouped and separated corners, all mentioned codes applied, etc).

We would greatly appreciate it if someone could help us achieve the desired outcome for the img tag.

jqueryimagecssoffsetborder-image

Answer №1

::after is not suitable for img elements because pseudo elements are meant to be inserted as a virtual child inside an element, and images cannot have children.

Instead, a workaround could be to wrap the image in a span (which can be achieved using jQuery) and apply the background to that.

.image-border {
    display:inline-block;
    position:relative;
    padding:6px;
    background: url(http://i.imgur.com/0yCz3oA.png) top left,
      url(http://i.imgur.com/fWtyg99.png) top right,
      url(http://i.imgur.com/UcOam5I.png) bottom left,
      url(http://i.imgur.com/pjYWHyM.png) bottom right;
    background-repeat: no-repeat;
}
.image-border img {
    position:relative; 
    display:block; 
    margin:-3px; 
    z-index:-1;
}

http://jsfiddle.net/nfsuxbyL/

Answer №2

To utilize $(img).after, you must have a wrapper in place as border elements take the size of the parent and only insert the corners into that specific element. Here is the code along with some CSS styling:

$('img').wrap('<div class="IMGwrapper"></div>')
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/0yCz3oA.png" class="TL" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/pjYWHyM.png" class="BR" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/UcOam5I.png" class="BL" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/fWtyg99.png" class="TR" />');
.IMGwrapper {
  display: inline-block;
  position: relative;
  line-height: 0;
}
.IMGwrapper .TL,
.IMGwrapper .TR,
.IMGwrapper .BR,
.IMGwrapper .BL {
  position: absolute;
}
.IMGwrapper .TL {
  top: -3px;
  left: -3px;
}
.IMGwrapper .TR {
  top: -3px;
  right: -3px;
}
.IMGwrapper .BR {
  bottom: -3px;
  right: -3px;
}
.IMGwrapper .BL {
  bottom: -3px;
  left: -3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery'd Edges:
<img src="http://i.imgur.com/ZLmYjVc.png" />

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

Selecting an element from CSS using Jsoup

Is it possible to retrieve all images that do not have the first class attribute as "content.slide0"? In my example, I am utilizing the Jsoup library to display selectable elements in a WebView. Elements element = doc.select("HERE_SOLUTION"); <head ...

androidjqueryhtmlcssjsoup

jQuery AJAX request delivering duplicate data

My jQuery ajax call is loading some elements into a div, but I am facing an issue where it returns duplicated responses. Instead of getting two elements as expected, I receive four (the 2 correct items, duplicated once). Below is the code snippet of my aj ...

jqueryajax

Formatting a specific portion of the content within the placeholder

I need to adjust the CSS style for a specific part of a placeholder, not the entire placeholder text. For example, if my placeholder text is: "Where (example: New York)" <label>Search:</label> <textarea placeholder="Where (example: New Yor ...

csshtmlplaceholder

What is the process for deselecting text from a text field?

After performing a search and displaying the results on my search form, I've noticed that the text query in the textfield is being marked as selected text even though I don't want it to be. How can I prevent this? Fiddle 1) What is the best app ...

javascriptcsshtml

Tips for executing a function when the PhoneGap/jQuery Mobile iOS app loads

Since implementing jQuery Mobile, the code that used to work fine is no longer executing the onbodyload function. I am not getting any of the test alerts and it seems like the issue lies in the execution of the onbodyload function. How can I fix this? < ...

jqueryiosjquery-mobilecordova

Error encountered with Jquery script: "Unauthorized access"

I'm currently working on a script that involves opening a child window, disabling the parent window, and then re-enabling the parent once the child window is closed. Here's the code snippet: function OpenChild() { lockOpportunity(); if (Clinical ...

javascriptjqueryaccess-denied

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Having trouble with an issue. Let me explain. I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3 ...

javascriptjqueryhtmlcss

Adjust the color of the text for the items in the drop-down field on the WooCommerce

https://i.stack.imgur.com/CHJUz.png It appears that the font color on my main website is white. However, on the WooCommerce Checkout Page, all drop down fields' items are also displayed in white, making it difficult for users to see the options witho ...

htmlcsswordpresswoocommercecss-selectors

What is the best method to retrieve child elements from a class list object?

Seems like I have a similar content class <div class="parentclass"> <div class="childClass"> </div> <div class="childClass"> </div> <div class="childClass"> </d ...

javascripthtmlnode.jscss

Transforming this Rails form into an Ajax/JavaScript/jQuery format will eliminate the need for submission

I have developed a form in Rails that computes the Gross Profit Margin Percentage based on an input of Price. When a user selects the relevant product on the form and enters a price in the 'deal_price' field. A callback is triggered to retrieve ...

javascriptjqueryruby-on-railsajax

Choosing Issues

My selectpicker is displaying data outside the dropdown menu before making a selection. The data appears both inside and outside of the dropdown. Can someone please help me identify the issue and guide me on how to fix it? <select class="selectpick ...

javascriptphphtmljquerycss

Swap the image when hovering over it

Is it possible to modify this specific code so that a hover effect is triggered on mouseover? I attempted to look into similar questions and answers, but I found them difficult to understand. Here is the HTML snippet: <a href="RR.html"><img src ...

htmlcsshover

Developing a modal with various hyperlinks

I'm currently working on a website that features multiple news articles, each linking to a separate page. Is it possible to use modal windows to have the articles pop up on the same page instead of opening in a new window? If so, I would greatly appre ...

javascripthtmlcsspopupmodal-dialog

Struggling to implement CSS variables across different browsers

I'm struggling to make CSS variables function properly, here is what I have so far: :root { --primary-color: #ffcd600; --spacing: 10px; --blur: 10px; } img { padding: var(--spacing); background: var(--primary-color); } When I check the el ...

csscss-variables

Div element failing to respond to hover effect

I have implemented a hover effect to display an icon overlay and filter on the Instagram feed of a website I am currently working on. Everything looks perfect when I inspect the element and set the state to hover. However, when I test the website and hover ...

jqueryhtmlcss

jQuery if/else conditions

I'm struggling to write some if/else conditions within a jQuery ajax method. My knowledge of jQuery is limited, so I may have made a small mistake in the syntax. Here's what I have: function swapContent(count, product) { $.ajax({ typ ...

jqueryajaxif-statement

Issue with Safari div not exhibiting proper overflow functionality

I'm looking to set up a webpage with a single sidebar and content area. Here's how I envision it: <div id="mainWrapper"> <!-- Sidebar --> <div id="sidebar"> <p>Sidebar</p> <p>Sidebar< ...

htmlcsssafari

When floating a heading 4 (h4) and two divs to the left, and a single div to the right,

When floating a h4 and 2 divs to the left, and another div to the right, how can I place a block inside the remaining space that perfectly fills it? The background color of this space should not spread outside. [h4][div][div][remaining space][div] Thank ...

htmlcsscss-float

Angular date control and its corresponding date panel are not properly aligned on the user interface

I am utilizing Angular and Angular Material for date control display. See the code snippet below: <input type="date" (change)="validateDateRange($event,true, index)" class="form-control oot-start-date align-middle" name=& ...

cssangularangular-material

Choose the radio button by clicking using jQuery

I am attempting to use jQuery to select a radio button on click. Despite multiple attempts, I have been unsuccessful so far. Here is my current code: JS $(document).ready(function() { $("#payment").click(function(event) { event.preventDefault() ...

javascriptjqueryruby-on-rails