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

Having trouble getting the HTML input textbox onChange event to fire properly?

This is the code I have been working on: <script language="JavaScript"> function toggle() { if (this.value=='1') { document.getElementById('dbOn').style.visibility='visible'; } el ...

javascripthtmltextboxonchange

Hide the address bar in a Google Maps iFrame

After numerous attempts, I still can't seem to hide the address bar on this Google Maps iFrame. Can anyone provide a solution or workaround for this issue? I have tried using display:none; in our CSS, which successfully hides the address bar when I d ...

javascripthtmlcsswordpressiframe

Revolutionizing Zen Cart with slimMenu

Is there a smarter person out there who can help me understand why the slimMenu is breaking when I add these files to the bottom of the page? <link href="includes/templates/westminster_new/css/age-verification.css" rel="stylesheet"> <script src=" ...

phpjquerycssjquery-cookie

Next.js in combination with Tailwind CSS

While attempting to customize the styling for my Next.js 13 app, I encountered an error message that states: Syntax error: C:\Users\User\Documents\webdev\TicketingApp\ticketing-app\app\globals.css The text-default- ...

cssnext.jstailwind-css

The AppBar is consuming space and obstructing other elements on the

As I dive into React/Material-UI and learn the ropes of CSS, I've come across a challenge with my simple page layout featuring an AppBar. Unfortunately, this AppBar is overlapping the elements that should be positioned below it. In my quest for a sol ...

cssreactjsmaterial-uiappbar

Show random images of different sizes by employing jquery

I am seeking a solution for my webpage which currently loads a random image from an array and centers it using negative margins in CSS. While this method works fine with images of the same size, I am looking to modify the code so that it can handle images ...

jquerycssimagerandomcenter

Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

Currently, I am using Webdriver.io and facing a challenge in selecting an element within the "text-fields-container" class. This particular element happens to be a password field, and both classes share the same name. Can someone guide me on how to go abou ...

cssselenium-webdriverxpathwebdriverwebdriver-io

The alignment of Material-UI Typography in AppBar appears to be off

Having trouble centering text in an AppBar? You're not alone. Despite trying various methods like using Typography element, align="center", textAlign="center", and style={{ align: "center" }}, among others: class CustomApp extends React.Component { ...

cssreactjsmaterial-ui

PayPal's fast checkout page experiencing a billing problem

I'm experiencing a problem with my paypal express checkout where it won't allow guest-checkout without logging into paypal, despite having the necessary form fields: <input type="hidden" name="SOLUTIONTYPE" value="Sole" /> ...

htmlformspaypal

Trouble aligning CSS UL/LI menu in the center

Could someone help me with centering my CSS UL menu? I've posted the code below, as I'm still learning CSS and would appreciate any guidance. I've only been able to center it by setting a fixed width and using HTML center tags, but I need t ...

html-listscss

Use CSS3 and jQuery.validate to highlight mandatory fields in red

I've been attempting to change the color of required fields in a form to red, but so far I haven't had any success. Here is the form code and the CSS that I have experimented with. contact.html <h2>Send us an ...

csshtml

The issue of double submission persists, with the prevention of the default action

I'm in need of assistance. Within my form, I have two buttons displayed on the page: "Save" and "Publish". Below is the corresponding HTML code: <button type="submit" class="button">Save</button> <button type="button" class="button" n ...

javascriptjqueryhtml

How to ensure a div within an anchor tag occupies the full width in HTML and CSS?

In my code, I am working on creating multiple small boxes with images and centered text inside. The goal is to have these boxes clickable, where clicking the image will take you to a specific link. On desktop, I want a hover effect that darkens the image b ...

javascriptjqueryhtmlcss

What is the best way to horizontally center a div while ensuring the content within the div stays aligned?

I'm attempting to align a div in the center while maintaining the position of its contents. Check out my code snippet: <style> .wrap{ position: relative; } .character{ position: absolute; bottom: -10%; left: 0; heigh ...

htmlcss

Is there a way to display the JavaScript widget exclusively on the homepage or main page

How can I limit the display of a Twitter widget on my blog page to only show on the main page and hide it when visitors navigate to sub-pages or individual blog entries? ...

javascripthtmltwitterblogs

svg viewbox cannot be adjusted in size

Struggling with resizing an SVG to 20px by 20px. The original code size of the SVG is quite large at 0 0 35.41 35.61: <!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> ...

htmlcsssvg

Absence of MVC5 Vanilla Layouts

Creating my first MVC5/Razor application from the ground up, I want to avoid including unnecessary references that cause bloat. In the Views folder, I have separate Home and Shared subfolders. The Home folder contains Index.cshtml, while the Shared folder ...

cssasp.net-mvcrazor

Is the ID selector the quickest method in jQuery and CSS?

Which is the optimal choice in jQuery/javascript for speed? $('#myID .myClass') or $('.myClass') What is the preferred option to utilize in CSS? #myID .myClass{} or .myClass{} In hindsight, I realize my explanation was insuffici ...

javascriptjquerycssjquery-selectorscss-selectors

UI experiencing issues with selecting radio buttons

When trying to select a radio button, I am facing an issue where they are not appearing on the UI. Although the buttons can be clicked, triggering a function on click, the selected option is not displayed visually. <div data-ng-repeat="flagInfo in avai ...

javascriptangularjscss

Participants will utilize functions to predict a number between 1 and 1000

I am currently working on a project that involves creating a number guessing game for the user. The idea is to have the program generate a random number between 1 and 1000, and then prompt the user to guess the number. If the guess is too low or too high ...

javascripthtmlfunction