Problem with border-image

Question

Problem with border-image

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Nuevos Estilos</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <script src="main.js"></script>
</head>
<body>
    <header id="principal">
        <span id="titulo">Estilos CSS Web 2.0</span>
    </header>
</body>
</html>

CSS:

body{
    text-align: center;
}

#principal{
    display: block;
    width: 500px;
    margin: 50px auto;
    padding: 15px;
    text-align: center;

    border: 29px;
    -moz-border-image: url("diamonds.png") 29 stretch;
    -webkit-border-image: url("diamonds.png") 29 stretch;
    border-image: url("diamonds.png") 29 stretch; 
}

#titulo{
    font: bold 36px MiNuevaFuente, verdana, sans-serif;
    color: hsla(304, 37%, 31%, 0.5);
}

@font-face{
    font-family: 'MiNuevaFuente';
    src: url('font.ttf');
}

I want to place the border-image but when I execute it, the border does not appear in the browser.

html css

asked by Génesis 06.11.2018 в 14:29

source

2 answers

Copy / Move files without specific path vb SQL query with mariadb in which the first 3 rows will be shown and the last row added with their position to make a classification

score 1 · Answer 1

You have the problem in the property border , you should put it like this:

border: 29px solid transparent;

Apart from the thickness of the border, you should indicate your texture solid so that it has a full coverage of the entire border and you indicate that it is transparent so that you can see the image.

body{
    text-align: center;
}

#principal{
    display: block;
    width: 500px;
    margin: 50px auto;
    padding: 15px;
    text-align: center;
    border: 29px solid transparent;
    -moz-border-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7CGAyIuH7UED1c3EyrfcsQ0W4pYWT_eCjOPa28tikB-kBkAjKcA") 29 round;
    -webkit-border-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7CGAyIuH7UED1c3EyrfcsQ0W4pYWT_eCjOPa28tikB-kBkAjKcA") 29 round;
    -o-border-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7CGAyIuH7UED1c3EyrfcsQ0W4pYWT_eCjOPa28tikB-kBkAjKcA") 29 round;
    border-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7CGAyIuH7UED1c3EyrfcsQ0W4pYWT_eCjOPa28tikB-kBkAjKcA") 29 round; 
}

#titulo{
    font: bold 36px MiNuevaFuente, verdana, sans-serif;
    color: hsla(304, 37%, 31%, 0.5);
}

@font-face{
    font-family: 'MiNuevaFuente';
    src: url('font.ttf');
}

<header id="principal">
  <span id="titulo">Estilos CSS Web 2.0</span>
</header>

score 1 · Answer 2

Remove quotes in border properties:

#principal{
   display: block;
   width: 500px;
   margin: 50px auto;
   padding: 15px;
   text-align: center;

   border: 29px;
   -moz-border-image: url(diamonds.png) 29 stretch;
   -webkit-border-image: url(diamonds.png) 29 stretch;
   border-image: url(diamonds.png) 29 stretch; 
}