CSS border-image属性未显示

Question

I am having some issues with the CSS border-image property. The CSS is as follows:

    footer#footer {
background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
background-color: #cccccc;
border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);
-moz-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);
-webkit-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);
border-image-width: 100% 0 0 0;
-moz-border-image-width: 100% 0 0 0;
-webkit-border-image-width: 100% 0 0 0;
}

I have an image in the footer itself, and this appears to cover the area that has been set for the border.

The website I am trying to apply this to is as follows: http://bramcroft.co.uk/

I would like the border above the brown footer.

Any help would be greatly appreciated!

Answer 1

You need to add double-quotes "...." to your css image path file.

Change this:

border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);

-moz-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);

-webkit-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);

to this:

border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png");

-moz-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png");

-webkit-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png");

Answer 2

U can try this by changing the desired border size

border:10px;
background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
background-color: #cccccc;
border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png") 30 30;
-moz-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png") 30 30;
-webkit-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png") 30 30;