Basics of CSS border-image explained

Although it seems simple, I'm struggling to figure out what the issue might be.

I am attempting to create a div with a specific border on an ASP.Net webpage.

CSS:

.ResourcesDiv
{
border-image:url(http://blogrope.com/wp-content/uploads/2013/06/003-wood-melamine-subttle-pattern-background-pat.jpg) 30 30 stretch;
border: 15px solid transparent;
width: 300px;
padding: 10px 20px;
margin: 50px;
}

HTML/ASP:

<div id="Resources" class="ResourcesDiv">
In the future, this will display the amount of herbs the user has.<br />
In the future, this will display the amount of gems the user has.<br />
</div>

EDIT: When I remove the transparent part of the border, it displays a black border but not the image. However, I have double-checked the URL and it appears to be correct.

htmlcssborder

Answer №1

View the demo

I've made some modifications to your CSS code

The Updated CSS Code

.ResourcesDiv {
    border-image:url("http://blogrope.com/wp-content/uploads/2013/06/003-wood-melamine-subttle-pattern-background-pat.jpg") 30 30 stretch;
    border: 15px solid url("http://blogrope.com/wp-content/uploads/2013/06/003-wood-melamine-subttle-pattern-background-pat.jpg") 30 30 stretch;
    width: 300px;
    padding: 10px 20px;
    margin: 50px;
}

Please try it out..

UPDATE:

Take a look at the updated demo - tested on both Chrome and Firefox

Answer №2

First and foremost, there is a spelling error in the following line:

border: 15px solid transperant;

The correct spelling should be 'transparent'.

Additionally, I believe you can find what you are looking for in this fiddle: (specific border, acquired from the URL provided)

DEMO

http://jsfiddle.net/kq950cvv/

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

Issue with implementing MUI Grid within a dialog across various screen sizes

While working with a MUI dialog and MUI grid, I encountered an issue. The code I am using is directly from the website, with only minor modifications to the dialog function names and the box wrapping the dialog. Despite changing the size of the dialog, t ...

javascriptcssreactjsmaterial-ui

Is it possible for me to use an image as a grid item?

I have a grid with 3 elements as shown below: Now, I am looking to replace the blue elements with images (they can be just placeholders). .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(30em, auto); justi ...

htmlcssresponsive-designcss-grid

Retrieve the targeted row from the table and then employ a function

Here is a datatable that I am working on: http://jsbin.com/OJAnaji/15/edit I initially populate the table with data and display it. Then, I add a new column called "kontrole." data = google.visualization.arrayToDataTable([ ['Name', &apo ...

javascriptjqueryhtmlgoogle-visualization

When a website is deployed to an application, the process includes MVC bundling and managing relative CSS image paths

When trying to convert relative image paths to absolute paths, there are numerous queries on stackoverflow addressing this issue. For example, take a look at this thread: MVC4 StyleBundle not resolving images This question recommends using new CssRewrite ...

cssasp.netasp.net-mvc-4bundlebundling-and-minification

The border on a specific field is not showing up when using Django Crispy Forms

Utilizing bootstrap and crispy forms for styling my website has been successful, except for a border issue with the username fields. While all other fields are displayed correctly, the username fields appear without a border as shown in the image below: h ...

htmldjangobootstrap-4django-crispy-forms

What is the best way to create a triangle shape that is responsive to elements?

I'm trying to make a background shape with a triangle inclusion using CSS. I want it to be responsive to all screen sizes, but I'm having some trouble. Any tips on how to achieve this? header { width: 100%; height:150px; background: #eee; } m ...

htmlcssresponsive-design

The landscape orientation causes the button bar to overflow by 100% of the body height

Imagine the scenario below: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> html, body { padding: 0; margin: 0; ...

ioscssiphonesafari

Is there a way to obtain HTML code within a contentEditable DIV?

When working in a contentEditable-DIV, my goal is to extract the HTML code from the starting position (0) to the end position where the user has clicked. <div id="MyEditableId" contentEditable="true"> 1. Some text 123. <span style="background-c ...

javascriptjqueryhtmlcss

Special Bootstrap's hamburger menu

My website has a vertical navigation bar with a breakpoint set for medium-sized screens to display a hamburger menu. When the hamburger menu appears, I want to hide the text following the icons to save space and only show the icons. Clicking on the hamburg ...

htmlcssdrop-down-menuresponsive-designbootstrap-4

Having trouble displaying the Order List in Tailwind CSS and Next.js?

I am having trouble displaying an ordered list on my page. I have tried using the <ol> tag, but for some reason the numbers are not showing up. Even when I switch to the <ul> tag, it's still not working properly. Take a look at this scree ...

htmlnext.jstailwind-css

Step-by-step guide on concealing elements and subsequently displaying them upon clicking the containing DIV

It's a bit tricky to explain without visuals, so I suggest checking out the JSFiddle link provided. Essentially, when a specific div is clicked, it should expand to reveal some inputs and buttons. However, the issue I'm facing is that upon loadin ...

javascriptjqueryhtmlanimationjquery-animate

Skrollr immediate pop-up notification

Can anyone help me figure out how to make text appear suddenly and then disappear using skrollr? I've been able to get it to fade in and out, but I want it to just show up without any transition. Here's the code I have so far: <div id="style" ...

javascriptjqueryhtmlcss

Efficient code for varying layouts of disabled Angular Material buttons

I've been wondering if there's a simpler way to customize the appearance of a disabled button using Angular Material. Currently, I achieve this by utilizing an ng-container and ng-template. While this method gets the job done, the code is not ve ...

cssangularif-statementangular-material

Warning in Next.js: When utilizing conditional rendering, the server HTML is expected to have a corresponding <div> inside another <div>

Although similar questions have been asked on various platforms like Google, none seem to provide answers that align with my specific situation. Essentially, my goal is to have a different search bar displayed in the header based on the page I am currentl ...

javascripthtmlreactjsnext.js

Using Typescript to mute audio elements within HTML documents

I have a scenario where I want to mute audio that automatically plays when the screen loads. In order to achieve this, I am attempting to add a button that can toggle the audio mute functionality using Typescript within an Angular4 application. The code sn ...

javascripthtmlangulartypescriptaudio

What is the best way to move information from one table to a different one?

I have two tables: users2 and user_totals. Each of these tables has rows named clicks (impression_count), fclicks (use_count), and completed_stus (completion_count). The ones in brackets are the new additions in the user_totals table. I would like to tra ...

cssmysqli

Ways to control the number of boxes that are checked

I am currently working on a script to restrict the number of checkboxes that can be checked, but I am encountering an issue where the script is disabling all checkboxes on the page. Is there a way to only disable a specific checkbox within a certain div? ...

javascripthtmljquery

No validation errors are currently being displayed. I am attempting to retrieve the error message when validation fails

My form validation error has suddenly stopped working. It was functioning properly yesterday, so I must have made a mistake somewhere, but I can't seem to pinpoint it. Now, when I attempt to sign up without entering any information, it just redirects ...

phphtmlcodeigniter

Adding a plethora of HTML using jQuery

Struggling to create a single-page website, I've found myself relying heavily on jQuery's .append function. But surely, there has to be a more efficient method for appending large chunks of code (like tables, graphs, etc.) onto a page. Take this ...

javascriptjqueryhtmlajax

Tips for incorporating mapbox.js as a background while keeping html content and Navbar consistently displayed on top

I am currently integrating MapBox.js into a Bootstrap 3 website. The main concept is to utilize a map as the background for a row that occupies the full width of the site, with html-content displayed on top. To ensure MapBox.js remains in the background, I ...

javascripthtmlcsstwitter-bootstrapmapbox